Выберите первый и последний элемент с определенным классом, используя jQuery

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

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

Ответ 1

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

Кстати, если вы используете jQuery, что со всеми событиями inline click?

Вы можете добавить такой код:

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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