Seleccionar solo un elemento en la colección jQuery

Question

¿Cómo puedo limitar un evento a un solo elemento en una colección jQuery?

En el caso siguiente, he intentado usar .one() para limitar el comportamiento (insertando la línea de HTML <li class='close'>Close</li>) en una sola instancia. El comportamiento realmente ocurre solo una vez, pero en CADA elemento coincidente de $("ul>li>a"). ¿Cómo hago que suceda solo una vez, a solo UNO de los elementos coincidentes en la colección?

¿Alguna idea?

$("ul>li>a").one(
"click",  
function(){ 
    $("ul ul") 
    .prepend("<li class='close'>Close</li>") 
} 
); 

Gracias de antemano.

-AS

Answer 1

Trate first(), se selecciona el primer elemento:

$("ul>li>a").first().one('click',  
    function(){ 
     $("ul ul").prepend("<li class='close'>Close</li>") 
    } 
); 

one() se utiliza, como ya habrá notado, para manejar un evento sólo vez.

Answer 2

Puede llamar al método first, que devolverá un nuevo objeto jQuery que contiene solo el primer elemento en el original.

Sin embargo, en su caso, que también podría utilizar el (equivalente) :first selector, así:

$("ul > li > a:first").click(function() { ... }); 

Si sólo desea manejar la primera click caso e ignorar los clics posteriores, que' Necesitaré usar .one(), como ya lo hace.

Answer 3

La selección jQuery devuelve una matriz. Por lo tanto, $("selection")[0] puede funcionar. Sin embargo, hay mejores métodos abstractos para esto, como .get(0) o .first() (en caso de que esté buscando el primer elemento de la selección/matriz).

$ ("selección"). Get (índice) devuelve el elemento DOM puro (en ese índice específico) de la selección, y es no envuelto en el objeto jQuery.

$ ("selección"). Primero() devuelve el primer elemento de la selección, y envolturas en un objeto jQuery.

Así que si usted no necessarely desea devolver el elemento primera, pero aún desea la funcionalidad de jQuery, que puede hacer $($("selection").get(index)).

Dada su situación, esto debería funcionar bien:

// bind the 'onclick' event only on the first element of the selection 
$("ul>li>a").first().click(function() { 
    $("ul ul").prepend("<li class='close'>Close</li>"); 
}); 

lo que equivale a esto:

$($("ul>li>a").get(0)).click(function() { 
    $("ul ul").prepend("<li class='close'>Close</li>"); 
}); 

Y esto:

$($("ul>li>a")[0]).click(function() { 
    $("ul ul").prepend("<li class='close'>Close</li>"); 
}); 

---

debo estar en desacuerdo con Ryan, trabajando en la selección de CSS La cadena para filtrar el resultado es bastante costosa en comparación con la funcionalidad de matriz JavaScript nativa.

Answer 4

Debe especificar el índice del elemento con el que desea trabajar.

Si su selector devuelve más de un elemento, puede hacer un par de cosas ... Puede aislar sus elementos dándoles un atributo de clase o id en su html y modifique el selector para seleccionar solo la clase/Identificación del elemento/s que desea seleccionar o puede especificar el índice del elemento con el que está tratando de trabajar. El último método es un poco descuidado, pero funciona siempre que la estructura de su página no cambie.

Así que para el primer método hablé de que cambiaría su selector para esto después de la aplicación de una clase/id para sus elementos:

$("ul>li>a.class") 
or 
$("ul>li>a#id") 

Para el segundo método mencionado que desea cambiar su selector para esto:

$("ul>li>a:eq(index)") 

Donde index es el índice basado en cero del elemento que está intentando seleccionar.

Answer 5

es necesario combinar primero() con un():

$("ul>li>a").first().one('click', function() {}); 

más general:

$("ul>li>a:eq(n)").one('click', function() {});