Question

I have a list each containing a text value. How do I get the list object having exactly a given text value?

<div id="child4"></div>

<div id="child5">ib</div>

<div id="child6"></div>

<div id="child7">ii</div>

<div id="child8">iii</div>
<div id="child1" width="200px"></div><div id="child2">i</div>

 <script type="text/javascript">
    alert($("div>div:contains('i')").attr("id"));
 </script>

The above script gives me all the div that contains the text value i..How can I fix this so that i get an element having exactly the same text value as ‘i’?

Answer 1

$("div > div").filter(function() {
   return $(this).text() === "i"; 
});

The filter method returns only elements that match the condition. The condition will only match elements whose text is the specified string.

Note that in your example, this will not match anything, as your selector div > div will select div elements that are direct children of another div, and the elements in your example have no parent div.

Here’s an example of the code running. In the example, I’ve changed the selector to just div.