Giving html list elements that only contain a specified text a background color using Jquery

Question

I have the following html script:

<ul>
<li class="container">
<div class="age">24</div>
<div class="married">no</div>
</li>

<li class="container">
<div class="age">27</div>
<div class="married">yes</div>
</li>

<li class="container">
<div class="age">56</div>
<div class="married"><!--empty--></div>
</li>

<li class="container">
<div class="age">34</div>
<div class="married">no</div>
</li>
</ul>

I would like that only the li elements that contain a no in their div.married get a green background using Jquery.

I don't understand why this code does not work. How do I get the intended result?

Answer 1

Try this:

$(".container .married").filter(function() {
    return $(this).text() == "no";
}).closest('.container').css('background-color', 'green');

Example fiddle

Answer 2

You have an erroneous ; after "green" although you would still not get what your looking for.

You could also;

$(".married:contains(no)").parent().css(...)