Working with jQuery Collections

Question

我试图增加我对jQuery的理解。请考虑以下代码。

if ($('.myClass').data('id') == '123') {
}

这是如何工作的？它看起来很简单，直到您了解$()返回元素集合。那么上面的代码到底做了什么呢？比较此类元素集合的 data-id 属性的值有何意义？

（我知道我可以使用each()来显式测试集合中的每个元素。我的问题是关于上面的代码做了什么。

Answer 1

.data('id')返回集合中第一项的值，但.data('id','xyz')将为集合中的所有项设置值 - 与其他jQuery方法（如.html()，.text()等）的行为大致相同。

在这样的 if 语句中只测试第一个似乎没有意义，但对于您知道只有一个元素的情况更有意义，例如，当您的选择器是 id 时，或者当您在事件处理程序或其他东西中使用 $(this).data('id') 时。

如果要询问如何测试集合中的所有项是否都具有特定的数据值，则可以执行以下操作：

var $col = $('.myClass');
if ($col.length === $col.filter(function(){return $(this).data('id') === '123';}).length) {
   // do something
}

或者，如果您只是想知道是否至少有一个具有该数据值：

if ($('.myClass').filter(function(){return $(this).data('id') === '123';}).length > 0) {
   // do something
}

Answer 2

我相信如果你试图通过 jquery 函数获取一个值，它会从集合中的第一项返回值。 例如，如果您有：

<div class='1'></div>
<div class='2'></div>
<div class='3'></div>

然后你运行：

$('div').attr('class');

它将返回"1"。我不知道这是否通过所有jQuery函数都是统一的，但这是预期的行为。

Answer 3

您可以使用 jQuery .each（） - http://api.jquery.com/jQuery.each/

注释中的示例，因为stackoverflow不太喜欢jsFiddle。