CODEWITHSUNDEEP
javascriptjqueryhtml
tsusanka
tsusanka

Reputation: 4841

Select first and last element with particular class using jQuery

I have a list of spans with particular class "place" and some of them have class "activated". Is there a way to select the first item with class "activated" and the last? 

<span class="place" onclick="activate();">1</span>
<span class="place" onclick="activate();">2</span>
<span class="place activated" onclick="activate()">3</span>
<span class="place activated" onclick="activate();">4</span>
<span class="place activated" onclick="activate();">5</span>
<span class="place activated" onclick="activate();">6</span>
<span class="place" onclick="activate();">7</span>

Upvotes: 28

Views: 39082

Answers (4)

Jordan Running
Jordan Running

Reputation: 106037

var places = $('span.place.activated');

var first = places.first(),
    last  = places.last();

Explanation: The span.places.activated selector will get all <span>s with both "place" and "activated" classes. Then the first() and last() methods will return the first and last items of that set. This is preferable to using the :first and :last pseudoselectors because selection is expensive and this way we only do selection once and then rely on (cheap) array operations to get the first and last elements.

Upvotes: 14

Vasyl
Vasyl

Reputation: 1423

If you take care about performance, than better use $('span.place.activated') instead $('.activated:first'). But, in this case, the second variant correct too.

Upvotes: 1

Stephen
Stephen

Reputation: 18964

var firstspan = $('span.activated:first'),
    lastspan = $('span.activated:last');

By the way, if you're using jQuery, what's with all the inline click events?

You could add some code like so:

$('span.place').click(function() {
    activate(); // you can add `this` as a parameter
                // to activate if you need scope.
});

Upvotes: 39

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

var first = $('.activated:first');
var last = $('.activated:last');

Upvotes: 0

Related Questions