Find element where child items h2 text has a specific value

Question

I think this is really simple but I can't seem to find the right selector syntax. I have html like this:

<div class="parent">
    <h2>Summary</h2>
    <p>... bunch of content ...</p>
</div>
<div class="parent">
    <h2>Statistics</h2>
    <p>... bunch of content ...</p>
</div>
<div class="parent">
    <h2>Outcome</h2>
    <p>... bunch of content ...</p>
</div>

I want to find the div whose h2 child contains the text 'Statistics'.

I tried various combinations of:

$(".parent").find("h2[text='Statistics'").parent()

which doesn't work as the find returns an empty set. If I do this:

$(".parent").find("h2").text("Statistics").parent()

I get back 3 elements- all of which appear to be the div containing Statistics. I could add first() to that, but it seems kind of gross. What is the right syntax to find that one item?

Answer 1

Use:

$(".parent").find("h2:contains('Statistics')").parent();

This uses the :contains() selector.

Answer 2

$(".parent").find("h2:contains('Statistics')").each(function(){
    var div=$(this).parent();
   // use div as you want
})

Working http://jsfiddle.net/SayjQ/

Answer 3

what about using HAS

$(".parent:has(h2:contains('Statistics'))")