Jquery filter - html elements - html

Question

How to filter html elements using Jquery function ?
Below is the html structure. I want to get the value of 2nd span which is inside a tag warpped in a li item ?
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span> ----- **How to filter and find this element value based on the message span value ?
</a>
</li>
```````````````
I need a condition like in li if span's value = "Item3", get the below span.icon's value

Answer 1

Couple of ways to do it. One way is with has and contains.
$("li:has(span.icon:contains('Icon_3'))").addClass("selected")
.selected {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
And now based on the information you provided.....
var text = $("span.message:contains(Item3) + span.icon").text()
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>
or how most people would do it.
var messageElem = $("span.message").filter(function(){ return this.textContent === "Item3" });
var text = messageElem.next("span.icon").text();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>

Answer 2

I'd prefer this, because :contains() seeks the matching string and not exact string. That is why, using filter is better :)
var choice = $("li span.message").filter(function(){
return $(this).text().trim() === "Item3";
}).next('span.icon');
//If there is only one item with text "Item3"
console.log(choice.text());
//If there are multiple items
choice.each(function(){
console.log($(this).text());
});
.selected {
background-color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="Link2">
<span class="message">Item2</span>
<span class="icon">Icon_2</span>
</a>
</li>
<li>
<a href="Link3">
<span class="message">Item3</span>
<span class="icon">Icon_3</span>
</a>
</li>
</ul>

Answer 3

Code:
$('li span.icon')
It should work