Элемент Jquery get, содержащий дочерний элемент с определенным значением html

Я хотел бы использовать JQuery для добавления класса к элементу "li", который содержит элемент "span" с html/val равным нулю.

Например, если мой код выглядит так:

<ul>
    <li><span>Item 1</span><span class="num">30</span></li>
    <li><span>Item 2</span><span class="num">0</span></li>
    <li><span>Item 3</span><span class="num">20</span></li>
</ul>

Я хочу изменить его на следующее:

<ul>
    <li><span>Item 1</span><span class="num">30</span></li>
    <li class="disabled"><span>Item 2</span><span class="num">0</span></li>
    <li><span>Item 3</span><span class="num">20</span></li>
</ul>

В прошлом я использовал код для проверки значений атрибутов элементов, но никогда их html/val не делал с этим...

$('li').has('span.num').addClass('disabled');

Однако в этом случае это приведет к:

<ul>
    <li class="disabled"><span>Item 1</span><span class="num">30</span></li>
    <li class="disabled"><span>Item 2</span><span class="num">0</span></li>
    <li class="disabled"><span>Item 3</span><span class="num">20</span></li>
</ul>

Что явно не работает... Спасибо

Ответ 1

Это должно делать то, что вы хотите.

$('li').each(function(){
    if( $(this).find('span.num').text() == '0' ) $(this).addClass('disabled')
});

JS Fiddle

Я бы предложил следующее:

$('li').has('span.num:contains(0)').addClass('disabled')

Но он не работает, поскольку он проверяет, существует ли значение внутри html - не для точного соответствия. В этом случае каждый из элементов span.num имеет в них 0, поэтому каждый li получит выбранный класс. Кажется, что не существует: equals(), аналогичный селектору: contains().

Ответ 2

Попробуйте это.

$('ul span.num').filter(function(){
    return $(this).text() == "0";
}).parent().addClass('disabled');

Демо

Ответ 3

Try:

$('li span.num').filter(
    function(i){
        return $(this).text() == '0';
    }).closest('li').addClass('selected');

JS Fiddle demo.

Ответ 4

Вы можете сопоставить элемент <span> с filter(), а затем получить его родительский <div> с помощью parent():

$("li > span.num").filter(function() {
    return $(this).text() === "0";
}).parent().addClass("disabled");

Ответ 5

Вот быстрый способ:

$('li .num').each(function(){
    if ( $(this).text() == '0') $(this).parent().addClass('disabled');
});

С пример jsFiddle.