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

10 浏览
0 Comments

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

有没有一种简单而直接的方法来根据它们的 data 属性选择元素？例如，选择所有具有名为 customerID 的数据属性且其值为 22 的锚点。

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

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

对于那些搜索并希望获得有关使用数据属性进行选择的通用规则的人:

$("[data-test]")会选择任何具有数据属性的元素(不管属性的值为何)。 包括:

attributes with values
attributes without values

$('[data-test~="foo"]')会选择包含 foo的数据属性的元素，但不必是精确的，例如:

Exact Matches
Where the Attribute merely contains "foo"

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

Exact Matches

但不包括

This won't match

0
0 Comments 

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

你应该能够省略*，但如果我记得正确，这可能会导致错误结果，具体取决于你使用哪个jQuery版本。

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

此外，如果你在jQuery脚本中经常使用数据属性，你可能需要考虑使用HTML5定制数据属性插件。这可以使你使用.dataAttr('foo')编写更可读的代码，并在缩小后结果占用更小的文件大小（与.attr('data-foo')相比）。

0