关于jquery：按数据属性选择元素


Selecting element by data attribute

是否有一种简单直接的方法可以根据data属性选择元素？ 例如，选择具有名为customerID的数据属性且值22的所有锚点。

我有点犹豫是否使用rel或其他属性来存储此类信息，但我发现根据存储在其中的数据来选择元素要困难得多。

相关讨论

1
$('*[data-customerID="22"]');

您应该可以省略*，但如果我没记错，根据您使用的jQuery版本，这可能会产生错误的结果。

请注意，为了与Selectors API(document.querySelector{,all})兼容，在这种情况下，属性值(22)周围的引号可能不会被省略。

此外，如果您在jQuery脚本中大量使用数据属性，则可能需要考虑使用HTML5自定义数据属性插件。这允许您使用.dataAttr('foo')编写更易读的代码，并在缩小后产生更小的文件大小(与使用.attr('data-foo')相比)。

相关讨论

对于人们谷歌搜索并想要更多关于选择数据属性的一般规则：

$("[data-test]")将选择仅具有data属性的任何元素(无论属性的值)。包含：

1
2
attributes with values
attributes without values

$('[data-test~="foo"]')将选择数据属性包含foo的任何元素，但不一定要精确，例如：

1
2
Exact Matches
Where the Attribute merely contains"foo"

$('[data-test="the_exact_value"]')将选择数据属性精确值为the_exact_value的任何元素，例如：

1
Exact Matches

但不是

1
This won't match
相关讨论

使用$('[data-whatever="myvalue"]')将选择具有html属性的任何内容，但在较新的jQuery中，似乎如果使用$(...).data(...)附加数据，它会使用一些神奇的浏览器并且不会影响html，因此.find不会发现它在上一个答案中指出。

验证(使用1.7.2+测试)(另见小提琴):(更新为更完整)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var $container = $('');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item,"manually" add data attribute
var $item4 = $('Item 4');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');
相关讨论

要选择具有数据属性data-customerID==22的所有锚点，应包括a以将搜索范围限制为仅该元素类型。当页面上有许多元素时，以大循环或高频率执行数据属性搜索可能会导致性能问题。

1
$('a[data-customerID="22"]');

没有jQuery，我还没有看到JavaScript的答案。希望它可以帮助某人。

1
2
3
var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';
1
test

信息：

  • 数据属性

  • .querySelectorAll();

本机JS示例

获取元素的NodeList

1
var elem = document.querySelectorAll('[data-id="container"]')

html：

获取第一个元素

1
var firstElem = document.querySelectorAll('[id="container"]')[0]

html：

定位返回节点列表的节点集合

1
document.getElementById('footer').querySelectorAll('[data-id]')

HTML：

1
 

根据多个(OR)数据值获取元素

1
document.querySelectorAll('[data-section="12"],[data-selection="20"]')

HTML：

1
 

根据组合(AND)数据值获取元素

1
document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

HTML：

1
 

获取值以值开头的项目

1
document.querySelectorAll('[href^="https://"]')

通过Jquery filter()方法：

http://jsfiddle.net/9n4e1agn/1/

HTML：

1
2
<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript的：

1
2
3
4
$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });
相关讨论

像这样的结构：$('[data-XXX=111]')在Safari 8.0中不起作用。

如果以这种方式设置数据属性：$('div').data('XXX', 111)，它仅在您直接在DOM中设置数据属性时才有效：$('div').attr('data-XXX', 111)。

我认为这是因为jQuery团队优化了垃圾收集器，以防止在每个更改数据属性上重建DOM时出现内存泄漏和繁重操作。

相关讨论

要在Chrome中使用此值，该值不得包含另一对引号。

它只适用于，例如，像这样：

1
$('a[data-customerID=22]');
相关讨论

有时需要根据元素是否以编程方式附加到它们的数据项(也就是不通过dom-attributes)来过滤元素：

1
$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

以上工作，但不是很可读。更好的方法是使用伪选择器来测试这种事情：

1
2
3
4
5
6
$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ?"" :"data-") + arg) +"]") || typeof ($el.data(arg)) !=="undefined";
    };
});

现在我们可以将原始语句重构为更流畅和可读的内容：

1
$el.filter(":hasData('foo-bar')").doSomething();
相关讨论

只是为了通过"生活标准"的某些功能完成所有答案 - 到现在(在html5时代)，可以在没有第三方库的情况下完成：

  • 带有querySelector的pure / plain JS(使用CSS-selectors)：

    • 选择DOM中的第一个：document.querySelector('[data-answer="42"],[type="submit"]')
    • 在DOM中选择all：document.querySelectorAll('[data-answer="42"],[type="submit"]')
  • 纯/纯CSS

    • 一些特定的标签：[data-answer="42"],[type="submit"]
    • 具有特定属性的所有标记：[data-answer]或input[type]