Найти элемент, где дочерние элементы h2 text имеют определенное значение

Я думаю, что это действительно просто, но я не могу найти правильный синтаксис выбора. У меня html вот так:

<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>

Я хочу найти div, чей дочерний элемент h2 содержит текст "Статистика".

Я пробовал различные комбинации:

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

который не работает, поскольку find возвращает пустой набор. Если я это сделаю:

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

Я возвращаю 3 элемента, все из которых представляют собой div, содержащий статистику. Я мог бы добавить сначала() к этому, но это кажется грубым. Каков правильный синтаксис для поиска одного элемента?

Ответ 1

Использование:

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

Здесь используется селектор :contains().

Ответ 2

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

Рабочий http://jsfiddle.net/SayjQ/