Alex Rivera | Logout

Jquery get element containing child element with specific html value

Asked 2012-02-01T19:26:50.727
18

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>

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

jquery
Edit
Report

3 Answers

5

Try this.

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

Demo

answered 2012-02-01T19:32:13.660
2

Try:

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

JS Fiddle demo.

answered 2012-02-01T19:29:21.260
0

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

$("li > span.num").filter(function() {
    return $(this).text() === "0";
}).parent().addClass("disabled");
answered 2012-02-01T19:32:50.457

Your Answer