Jquery获取包含具有特定html值的子元素的元素

Question

我想使用 Jquery 向“li”元素添加一个类，该元素包含一个 html/val 等于 0 的“span”元素。

例如，如果我的代码如下所示:

<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>

这显然行不通......谢谢

Answer 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() 选择器。