Reputation: 2148
In jquery, how to select the last <li>
containing a bar
string in the following HTML :
<ul>
<li>bar</li>
<li>foo</li>
<li>foo</li>
<li>bar</li> <!-- I want to select this one -->
<li>foo</li>
</ul>
Upvotes: 0
Views: 67
Reputation: 253506
You have a couple of options:
// :contains(bar) would match 'bar', 'barbell' and 'rebar':
$('li:contains(bar)').last().css('color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>bar</li>
<li>foo</li>
<li>foo</li>
<li>bar</li> <!-- I want to select this one -->
<li>foo</li>
</ul>
Though bear in mind that :contains()
is not precise:
// :contains(bar) would match 'bar', 'barbell' and 'rebar':
$('li:contains(bar)').last().css('color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>bar</li>
<li>foo</li>
<li>foo</li>
<li>bar</li> <!-- I want to select this one -->
<li>barbell</li>
</ul>
Or:
$('li').filter(function () {
// this retains only those <li> elements whose text is exactly equal to 'bar':
return $(this).text() === 'bar';
// selects the last of the elements from the collection:
}).last().css('color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>bar</li>
<li>foo</li>
<li>foo</li>
<li>bar</li> <!-- I want to select this one -->
<li>foo</li>
</ul>
References:
Upvotes: 2
Reputation: 9637
use contains() and last() selector in jquery
$( "ul li:contains('bar'):last" ).css("color","red");
Upvotes: 3