jQuery获取包含具有特定html值的子元素的元素 [英] Jquery get element containing child element with specific html value

问题描述

我想使用Jquery将一个类添加到"li"元素中，该类包含一个html/val等于零的"span"元素.

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.

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

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>

过去，我曾使用代码来检查元素的属性值，但从未使用它们的html/val来实现此目的...

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

$('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

推荐答案

这应该做您想要的.

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

JS小提琴

我会建议以下内容:

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

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

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.

这篇关于jQuery获取包含具有特定html值的子元素的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！