Question

Assume I have the following:

<input type="text">
<div id="listofstuff">
    <div class="anitem">
        <span class="item name">Dog</span>
        <span class="itemdescription">AboutItem1</span>
    </div> 
    <div class="anitem">
        <span class="item name">Doodle Bird</span>
        <span class="itemdescription">AboutItem2</span>
    </div>
    <div class="anitem">
       <span class="item name">Cat</span>
       <span class="itemdescription">AboutItem3</span>
    </div>
</div>

I want to use jQuery selectors to get the <div> (.anitem) that contains the <span> with the item name “Cat”.

I thought it would be something like below, but it doesn’t work.

$('#listofstuff').find('.anitem div span:contains("Cat")');

What am I doing wrong?

Answer 1

You need to use the :has pseudo-class to get an element by its descendants:

$('#listofstuff .anitem:has(span:contains("Cat"))')

Here’s a demo.