Seleccione el primer y último elemento con clase particular usando jQuery

Question

Tengo una lista de tramos con clase particular "lugar" y algunos de ellos tienen la clase "activada". ¿Hay alguna manera de seleccionar el primer elemento con la clase "activada" y la última?

<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'); 

Por cierto, si estás usando jQuery, lo es con todos los eventos en línea clic?

Se podría añadir algo de código de este modo:

$('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(); 

Explicación: El selector span.places.activated obtendrá todos <span> s con ambas clases de "activado" "lugar" y. Luego, los métodos first() y last() devolverán los elementos primero y último de ese conjunto. Esto es preferible al uso de los pseudoselectores :first y :last porque la selección es costosa y de esta manera solo hacemos selección una vez y luego dependemos de operaciones de matriz (baratas) para obtener los primeros y últimos elementos.

Answer 4

Si se ocupa del rendimiento, entonces mejor utilice $('span.place.activated') en lugar de $('.activated:first'). Pero, en este caso, la segunda variante también es correcta.