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()选择器： $（＆＃34;：data（options）.age＆＃34;）但它只能通过数据参数而不是数据值来选择元素（我似乎只处理具有一个简单属性的元素。）

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

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

1 个答案: