如何查找具有特定数据属性的所有标签？

Posted 2023-05-09

【中文标题】如何查找具有特定数据属性的所有标签？

【英文标题】：How to find all tags with a specific data- attribute?

【发布时间】：2016-11-13 09:44:31

【问题描述】：

我需要使用 jQuery 找到所有绑定了“错误”数据的标签。 这就是我所做的。它不起作用，因为我用代码添加了 data 属性。

$('form input').data('error',1);

console.log( $('form input[data-error]') ); // This is empty

我怎样才能找回所有这些？

【问题讨论】：

这个属性到底叫什么？ valid-error、data-error 或 data-valid-error?

是的，我修改了。

data jQuery 方法不会创建数据属性，它会以某种方式在内部保留该值。

目前还不清楚确切的属性名称是什么。是data-error 而valid 什么都没有？

有效错误是一个错误。我纠正了这一点。谢谢

【参考方案1】：

使用filter()

$('form input').filter(function()
     return $(this).data('error'); // adjust if boolean not sufficient    
).doSomething();

【讨论】：

接受。事实上，我不得不等待 5 分钟才能做到这一点:-)

重要的是要认识到元素属性设置器在几乎所有情况下实际上都不会更新属性

我只需要知道这个列表是否为空。有没有更简单的答案？

只需检查它产生的集合的长度...var hasErrors = $('form input').filter(func........ ).length

【参考方案2】：

您可以使用原生 javascript（不需要 jQuery），只需使用：

Document.querySelectorAll() 和 Selectors Level 3（类似于 CSS）

var elms = document.querySelectorAll('[data-animal-type="fish"]');
console.log(elms.length);

<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>

选择器非常强大，可以进行更高级的选择，例如：

E[foo^="bar"] 一个 E 元素，其 "foo" 属性值正好开始 使用字符串 "bar" E[foo$="bar"] 一个 E 元素，其 "foo" 属性值正好以字符串 "bar" E[foo*="bar"] an E 结尾 “foo”属性值包含子字符串“bar”的元素 E[foo|="en"] 一个 E 元素，其 "foo" 属性以连字符分隔 以“en”开头（从左到右）的值列表