How to find span inside e element with title contains in Jquery

Question

Just wandering, how can I find span inside e element with title contains in jQuery ?

Example: I have the following html code:

<span class="test">
    <e title="1.2 testone">1</e>
    <e title="2.2 testtwo">2</e>
    <e title="3.3 testthree">3</e>
</span>

how can I find the e element object with title "two"?

Following is the jQuery code that I have been using, but doesn't seem working :

$('span.test').children().find("2.2").addClass("foundYou") 

Answer 1

You can use Attribute Equals Selector

 $('span.test').find("e[title=two]").addClass("foundYou") 

 .foundYou{ color:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="test"> <e title="one">1</e> <e title="two">2</e> <e title="three">3</e> <e title="two">2</e> </span> 

Answer 2

Attribute selection:

 $("[title='two']").addClass("foundYou"); 

 .foundYou { color: red; } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <span class="test"> <e title="one">1</e> <e title="two">2</e> <e title="three">3</e> </span> 

Answer 3

Simply using two will search for a tag with name two , for checking attribute use attribute equals selector. Although you have to use filter() method to filter among a collection.

$('span.test').children().filter('[title="two"]').addClass("foundYou") 

Or use it with children() method.

$('span.test').children('[title="two"]').addClass("foundYou") 

Answer 4

Use the selector string span.test > e[title="two"]' :

 $('span.test > e[title="two"]').addClass('found'); 

 .found { background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="test"> <e title="one">1</e> <e title="two">2</e> <e title="three">3</e> </span> 

Answer 5

Use descendent operator ( > )

 console.log($('span.test>[title=two]')) $('span.test>[title=two]').addClass('FoundYou') 

 .FoundYou { background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="test"> <e title="one">1</e> <e title="two">2</e> <e title="three">3</e> </span> 

Answer 6

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <span class="test"> <e title="one">1</e> <e title="two">2</e> <e title="three">3</e> </span> <script> console.log($(".test > e[title=two]").text()) </script> 

Answer 7

Although here are already wonderful answers, but I would like to remind that if you want to select an element(s) by part of title text just like what is in your question you can use Attribute Contains Selector .

If so use [title *= '2.2'] instead of [title = '2.2 testtwo']

 $("[title *= '2.2']").addClass("foundYou"); 

 .foundYou { color: red; } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <span class="test"> <e title="1.2 testone">1</e> <e title="2.2 testtwo">2</e> <e title="3.3 testthree">3</e> </span>