Выберите первый и последний элемент с определенным классом с помощью jQuery

Question

У меня есть список пролетов с определенным классом «место», а некоторые из них имеют класс «активирован». Есть ли способ выбрать первый элемент с классом «активирован» и последним?

<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> 

Answer 1

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

Кстати, если вы используете JQuery, что со всеми рядными событиями щелчка?

Вы можете добавить некоторый код следующим образом:

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

Answer 2

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

Answer 3

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

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

Объяснение: Селектор span.places.activated получит все <span> с с как "место" и "активированных" классов. Затем методы first() и last() возвратят первый и последний элементы этого набора. Это предпочтительнее использовать псевдоселекторы :first и :last, потому что выбор дорог, и поэтому мы делаем только один раз, а затем полагаемся на (дешевые) операции массива, чтобы получить первый и последний элементы.

Answer 4

Если вы заботитесь о производительности, чем лучше использовать $('span.place.activated') вместо $('.activated:first'). Но, в этом случае, второй вариант тоже правильный.