如何根据数据属性中对象的属性选择元素?

时间:2012-10-18 08:44:57

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

如果我的标记看起来像这样:

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

我可以为每一行拉出整个对象并迭代查找匹配但是如果有更有效的方法我宁愿不这样做。

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

2 个答案:

答案 0 :(得分:2)

试试这个

$('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

答案 1 :(得分:1)

您可以使用:

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

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

FIDDLE