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?

`.text()` is used to set text, not as a selector or limiter as you've tried to use it. — Patrick Moore, May 09 '13 at 16:44
@SetSailMedia Ah. Well that would explain why they were all the same then :) — Nicros, May 09 '13 at 16:45
:}} Good answer below from @Joe, or you can check this similar q&a: http://stackoverflow.com/questions/813477/jquery-selector-where-text-some-value — Patrick Moore, May 09 '13 at 16:45

score 23 · Accepted Answer · answered May 09 '13 at 16:44

23

Use:

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

This uses the :contains() selector.

answered May 09 '13 at 16:44

Joe

15,205
8
49
56

this actually doesnt qualify as a correct answer. it will work in some cases, but the question was "Find element where child items h2 text has a specific value". this code will also find h2 elements which contain the text. the text can be in the beginning, the middle, the end or the entirety. so it doesnt find an element which its text has a specific value. – Heriberto Lugo Dec 20 '20 at 04:10
this would actually be a viable solution: https://stackoverflow.com/a/33507307/6368401 – Heriberto Lugo Dec 20 '20 at 04:11

score 3 · Answer 2 · answered May 09 '13 at 16:47

3

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

Working http://jsfiddle.net/SayjQ/

answered May 09 '13 at 16:47

rahul maindargi

5,359
2
16
23

score 1 · Answer 3 · edited Aug 29 '18 at 13:52

1

what about using HAS

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

edited Aug 29 '18 at 13:52

DaFois

2,197
8
26
43

answered Aug 29 '18 at 12:30

javi

11
3

Find element where child items h2 text has a specific value

3 Answers3