jQuery如何查找基于数据属性值设置为对象的元素

Question

给出以下div:

<div data-options='{"name":"John", "age":"30"}'></div>

如何选择年龄为30的div元素?

我尝试使用。filter()方法:

$( "div" ).filter(function( index ) {
    return $( this ).data('options').age === "30";
    //or
    //return $( this ).data('options:age') === "30";
});

但是没有返回。

还尝试了jQuery UI的:data()选择器:$(":数据(选项)。时代")但是它只能通过数据参数而不是数据值来选择元素(I似乎只适用于具有一个简单属性的元素)。

最后，我尝试用jQuery来定义数据，而不是html:

$( "div" ).data( "options", { name: "John", age: 30 } );

然后再次尝试上述所有操作，但没有返回任何结果。

关于如何解决这个问题有什么线索吗?

Answer 1

我发现，对于有许多div的页面，出现以下错误:

Uncaught TypeError: Cannot read property 'age' of undefined(…)

在遇到没有设置数据选项的div时抛出，因此代码停止执行并在DOM中搜索其余的div。

因此，解决方案是首先检查div是否设置了数据选项，然后检查子键:

$("div").filter(function(index) {
    var options = $(this).data('options');
    return options ? (options.age == 30) : false;
}).css('color', 'red');