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

I would like to use Jquery to add a class to "li" element that contains a "span" element with a html/val equal to zero.

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

For Example if my code looks like this:

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

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

I want to change it to the following:

我想将其更改为以下内容:

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

In the past I have used code to check elements attribute values, but never their html/val doing something to this effect...

在过去,我使用代码检查元素属性值,但从来没有他们的html / val做这样的事情......

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

However in this case that would result in:

但是在这种情况下会导致:

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

Which is obviously not going work... Thanks

这显然不起作用......谢谢

5 个解决方案

#1

This should do what you want.

这应该做你想要的。

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

JS Fiddle

I would have suggested the following:

我会建议如下:

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

But it doesn't work, as it checks if the value exists inside the html — not for an exact match. In this case, each of the span.num elements have a 0 in them, so every li would get the selected class. There doesn't seem to be an :equals() counterpart to the :contains() selector.

但它不起作用,因为它检查html中是否存在值 - 而不是完全匹配。在这种情况下,每个span.num元素都有一个0,所以每个li都会得到所选的类。似乎没有:equals()与:contains()选择器相对应。

#2

Try this.

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

Demo

#3

Try:

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

JS Fiddle demo.

JS小提琴演示。

#4

You can match the <span> element with filter(), then get its parent <div> with parent():

您可以将元素与filter()匹配,然后使用parent()获取其父

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

#5

Here's a fast way to to it:

这是一个快速的方法:

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

With a jsFiddle example.

用jsFiddle示例。

#1