CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lapin
lapin

Reputation: 2148

jquery : Select last element which content is

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

Answers (2)

David Thomas
David Thomas

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

Balachandran
Balachandran

Reputation: 9637

use contains() and last() selector in jquery 

$( "ul li:contains('bar'):last" ).css("color","red");

DEMO

Upvotes: 3

Related Questions