使用 jQuery 选择具有特定数据的元素答案

【问题标题】：Select element with specific data by using jQuery使用 jQuery 选择具有特定数据的元素
【发布时间】：2011-05-28 09:10:12
【问题描述】：

是否可以通过jQuery的数据方法设置一些数据，然后再查询呢？类似于 ... 找到所有具有数据 foo == true 的元素？

【问题讨论】：

【解决方案1】：

如果不遍历 DOM 中的每个元素并检查它是否包含具有指定值的数据项，则仅使用 data API 是不可能的。

如果数据很简单，也许你可以使用 HTML5 数据属性，这些属性也可以通过选择器搜索。

$("selector").attr("data-key", "theKey");

稍后选择所有具有名为"data-key" 的属性和值为true 的对象

$('[data-key="true"]')

【讨论】：

【解决方案2】：

你可以使用.filter()来选择你想要的元素，像这样：

$("someSelector").filter(function() { return $.data(this, "foo"); });

在这种情况下，由于您检查的是布尔值，因此非常简单，检查值只需添加比较，如下所示：

$("someSelector").filter(function() { return $.data(this, "foo") == "value"; });

【讨论】：

使用$.data(this, 'foo') 比使用$(this).data('foo') 有什么优势？
@Matt - 不浪费 jQuery 对象 :)
这对我不起作用。我不明白你为什么对我评估$.data(this, "foo") == "value";，它通过用$.data(this).foo.id == "idValue"; 替换它来工作。不过感谢您的提示！真的帮了我大忙！
@Xeroxoid - 在您的情况下，您正在检查id 属性on foo，而不仅仅是foo。为了进行比较，在我的示例中，您需要 $.data(this, "foo").id 而不仅仅是 $.data(this, "foo") 进行等效比较。
@steelaz - 上述方法仅在元素存储了数据时才有效......数据属性的处理方式不同，并且必须由.data('name') 访问（至少是第一次） at 属性，而$.data(obj, 'name') 仅直接查看 jQuery 中的数据对象存储。