Question

Given the following html…

<div id="group">
    <ul>
        <li><div class="category">one</div></li>
        <li><div class="category">one</div></li>
        <li><div class="category">onetwo</div></li>
        <li><div class="category">two</div></li>
    </ul>
</div>

…I’m trying to figure out how to make a selector in jQuery that will select all '#group ul li' elements that have a child '.category' with innerHTML equal to some string (eg. “one”). For example, given the string “one”, this selector would return the first two li’s.

Here’s what I have so far:

$('#group ul li') will select all of the li’s. Then I need to filter:
$('#group ul li').filter(".category:contains('one')") will select all of these li’s such that they have a child with class category that contains the string ‘one’. However, is there any way to check that this is equal to one?

I’m thinking maybe just write my own function that does the equality check and pass that to filter?

Answer 1

$('#group ul li div.category').filter(function() {return $(this).text() == "one";}).parent()

This is probably the most specific way. See example.