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

Question

如果我的标记如下所示：

<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 选择特定元素？

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

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

Answer 1

试试这个

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

更多细节在这里

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

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

更多细节在这里

或者，如果它以值开头，您也可以使用开始选择器

Answer 2

您可以使用：

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

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

小提琴