Question

In jQuery, how can I reference only the element with the child’s h2 equal to “Recipe Test 2”?

<li class="sfnewsListItem">
            <h2 class="sfnewsTitle">
                <a href="#">Recipe Test 1</a>
            </h2>
            <div class="sfnewsMetaInfo">May 23, 2011</div>            
</li>
<li class="sfnewsListItem">
            <h2 class="sfnewsTitle">
                <a href="#">Recipe Test 2</a>
            </h2>
            <div class="sfnewsMetaInfo">May 23, 2011</div>            
</li>
<li class="sfnewsListItem">
            <h2 class="sfnewsTitle">
                <a href="#">Recipe Test 3</a>
            </h2>
            <div class="sfnewsMetaInfo">May 23, 2011</div>            
</li>

Answer 1

You could try:

$('a:contains("Recipe Test 2")').closest('h2');

JS Fiddle demo.

References:

• :contains().
• closest().