jQuery Как найти элемент на основе значения атрибута данных, заданного как объект?

Question

Давать следующий DIV:

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

Как выбрать Div элемент с возрастом равен 30?

Я попытался с помощью метода .filter():

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

но ничего не дал.

Также попробовал :data() Selector для JQuery UI: $ («: данные (опции) .age») , но он может выбрать только элементы по параметрам данных, а не от значений данных (я, кажется, работает только на элементы с одним простым атрибутом).

Наконец, я попытался определение данных по JQuery вместо HTML:

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

затем пытается все вышеперечисленное еще раз, но ничего не дало.

Любые подсказки о том, как решить эту проблему?

Answer 1

Я обнаружил, что, на странице со многими дивы следующее сообщение об ошибке:

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

был выброшен при столкновении с DIV, которые не имеют данных-параметры, установленные на нем, и, следовательно, код остановки выполнение и поиск остальных разделов в DOM.

Таким образом, решение, чтобы проверить первый, если DIV имеет данные-параметры, установленные на нем, а затем проверить суб ключа (ы):

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