按数据属性选择元素

Question

按数据属性选择元素是否有一种简单、直截了当的方法可以根据它们的data属性？例如，选择所有具有名为customerID它的价值是22.我有点犹豫不决rel或者其他属性来存储这样的信息，但是我发现根据元素中存储的数据来选择元素要困难得多。

Answer 1

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

您应该能够省略*但是，如果我正确地回忆起，取决于您使用的jQuery版本，这可能会产生错误的结果。

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

此外，如果在jQuery脚本中大量使用数据属性，则可能需要考虑使用HTML 5自定义数据属性插件..这使您可以通过以下方法编写更易读的代码：.dataAttr('foo')，并在缩小后产生更小的文件大小(与使用.attr('data-foo')).

Answer 2

对于那些在谷歌上搜索并想要更多关于使用数据属性进行选择的通用规则的人来说：

$("[data-test]")将选择任何仅仅有数据属性(不管属性的值如何)。包括：

<div data-test=value>attributes with values</div><div data-test>attributes without values</div>

---

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

<div data-test="foo">Exact Matches</div><div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

---

$('[data-test="the_exact_value"]')将选择数据属性确切值为the_exact_value，例如：

<div data-test="the_exact_value">Exact Matches</div>

但不是

<div data-test="the_exact_value foo">This won't match</div>

Answer 3

使用$('[data-whatever="myvalue"]')将选择具有html属性的任何内容，但在较新的jQueries中，如果您使用$(...).data(...)要附加数据，它使用一些神奇的浏览器内容，不影响html，因此不会被.find如先前的回答.

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

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// 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 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });

$container.append($item3);

// create item, "manually" add data attribute

var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');

$container.append($item4);

// only returns $item1 and $item4

var $result = $container.find('[data-generated="true"]');