查找所有具有特定数据属性的元素（无论值如何）答案

【问题标题】：Find all elements that have a certain data attribute (regardless of value)查找所有具有特定数据属性的元素（无论值如何）
【发布时间】：2014-08-17 22:25:03
【问题描述】：

我有一个包含一堆文本元素的表单，其中一些具有数据属性集。

我想遍历所有具有该属性的元素，提取该属性。

我创建了一个小提琴here。

var textInputs = $(':text');
alert('found ' + textInputs.length + ' textInputs');

var datas = textInputs.find('[data-foo]');
alert('found ' + datas.length + ' datas');

我正在查找文本元素，但数据属性上的选择器未返回任何元素。

想法会有所帮助...

【问题讨论】：

标签： javascript jquery jquery-selectors traversal jquery-traversing

【解决方案1】：

[data-foo] 选择器是正确的，但您应该在 filter 中使用它，而不是在 find 中：

var datas = textInputs.filter('[data-foo]');

See working fiddle here

【讨论】：

这似乎行得通。但我需要阅读 find() 和 filter() 之间的区别。谢谢。
更详细地说，仅仅使用[data-foo] 选择器意味着必须检查每一个 DOM 元素，这是一项相当乏味的任务。使用可以使用本机函数（如getElementsByTagName）完成的事情预先过滤性能要高得多。 $('input').filter('[data-foo]') 而不是 $('[data-foo]')。
性能方面，不会 $(':text[data-foo]');更快？还是同等的？
@Bonatoc 你说得对，$(':text[data-foo]'); 更快(see this fiddle)。此外，还有一种更有效的方法：$('[type="text"][data-foo]');。在:text jquery selector documentation 中也有描述，[type="text"] 更好但不匹配没有类型属性的<input>。
@JeffDege 我很高兴听到您将寻求进一步的知识！这是最重要的部分。谢谢你:)

【解决方案2】：

http://jsfiddle.net/qjb3V/

     var datas = $(':text[data-foo]');

【讨论】：