javascript - 使用 jQuery 集合

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。