使用 jQuery 按数据属性选择元素

Question

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

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

原文由 Hazem Salama 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 Mathias Bynens 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 JTG 发布，翻译遵循 CC BY-SA 3.0 许可协议