jquery - 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() Selector: $( ":data(options).age" ) 但它只能通过数据参数而不是数据值来选择元素（我似乎只使用一个简单的元素属性）。

最后，我尝试通过 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');