如何根据数据属性中对象的属性选择元素？答案

【问题标题】：How to select an element based on the property of an object inside a data attribute?如何根据数据属性中对象的属性选择元素？
【发布时间】：2012-10-08 16:03:53
【问题描述】：

如果我的标记如下所示：

<div data-test="{ "value" : "bar", "_id" : 1234, "name" : "john", "age" : 25 }">...</div>
<div data-test="{ "value" : "foo", "_id" : 1235, "name" : "paul", "age" : 26 }">...</div>
<div data-test="{ "value" : "drummer", "_id" : 1236, "name" : "ringo", "age" : 22 }">...</div>

如果我只有键“bar”或“foo”，我将如何使用 JQuery 选择特定元素？

我可以为每一行提取整个对象并遍历它以寻找匹配项，但如果有更有效的方法，我宁愿不这样做。

如何根据对象的属性进行干净的选择？

【问题讨论】：

jQuery 使用 xpath 来选择对象。 Xpath 不支持嵌入式 json 结构。
但是这个：$('#myDiv').data('value') 返回 bar 或 foo 所以 JQuery 能够对对象进行操作，不是吗？
"返回 bar 或 foo" ??没有这个标记和代码......
您可以在标记中使用 JSON 语法吗？然后您可以使用JSON.parse() 并更干净地匹配value 元素。不同之处在于您需要在字符串周围使用双引号而不是单引号。

标签： javascript jquery jquery-selectors custom-data-attribute

【解决方案1】：

试试这个

$('div[data-test$=": bar }"]')
$('div[data-test$=": foo }"]')

更多详情here

更新： 如果属性不是以 bar/foo 结尾，那么你可以试试contains selector

$('div[data-test*="'value' : 'bar'"]')
$('div[data-test*="'value': 'foo'"]')

更多详情here

或者你也可以使用starts selector，如果它以 value 开头

【讨论】：

我应该更清楚一点，实际的对象要复杂得多，并且不以 value 属性结尾。我将用更准确的示例更新问题。
如果此解决方案适合您，那么您对属性不感兴趣，而对属性感兴趣。该选择器不适用于由 .data("stuff", "things") 等设置的数据属性。

【解决方案2】：

你可以使用：

$("div").filter(function() {
    return $(this).data("test").value == "bar";
})

jQuery.data() 自动将 JSON 格式的数据值解析为相应的对象。

FIDDLE

【讨论】：

.filter() 是一个更准确的解决方案，因为它只会返回完全匹配。
您需要将外引号更改为单引号或转义内双引号。
您会这么认为，但实际上 Chrome 会像这样呈现 html（即使模板代码使用单引号），尽管看起来有问题，但我能够使用 JQuery 的 @ 成功访问该对象987654325@ 方法。我承认，这很奇怪，但它确实有效。