Question

我想使用Jquery向“li”元素添加一个类，该元素包含一个html / val等于零的“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（）选择器相对应。

Answer 2

试试这个。

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

<强> Demo

Answer 3

尝试：

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

JS Fiddle demo

Answer 4

您可以将<span>元素与filter()匹配，然后将其父<div>与parent()匹配：

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

Answer 5

这是一个快速的方法：

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

使用 jsFiddle example 。

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

5 个答案: