Wybieranie tylko jednego elementu w kolekcji jQuery

Question

Jak ograniczyć zdarzenie do pojedynczego elementu w kolekcji jQuery?

W poniższym przykładzie próbowałem użyć opcji .one(), aby ograniczyć zachowanie (wstawianie linii HTML kodu <li class='close'>Close</li>) do pojedynczej instancji. Zachowanie rzeczywiście dzieje się tylko raz, ale na KAŻDY dopasowany element $("ul>li>a"). Jak zrobić to tylko raz, tylko dla jednego z dopasowanych elementów w kolekcji?

Wszelkie pomysły?

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

Z góry dziękuję.

-AS

Answer 1

Spróbuj first(), wybiera pierwszy element:

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

one() służy, jak już zauważyliśmy, aby obsłużyć zdarzenie tylko raz.

Answer 2

Można wywołać metodę first, która zwróci nowy obiekt jQuery zawierający tylko pierwszy element w pierwotnym.

Jednak w przypadku, równie dobrze można użyć (odpowiednik) :first wybierak, na przykład:

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

Jeśli chcesz tylko do obsługi pierwszego click zdarzenie i zignorować wszelkie kolejne kliknięcia, ty” Muszę użyć .one(), jak już jesteś.

Answer 3

Wybór jQuery zwraca tablicę. Dlatego może działać $("selection")[0]. Jednak istnieją lepsze, wyabstrahowane metody, takie jak .get(0) lub .first() (w przypadku, gdy szukasz pierwszego elementu selekcji/tablicy).

$ („Wybór”). Dostać (indeks) zwraca czystego elementu DOM (w tym konkretnym indeksie) z wyboru, a nie jest zawinięte w obiekcie jQuery.

$ ("Wybór"). Pierwszy() zwraca pierwszy element selekcji i okłady to w obiekcie jQuery.

Więc jeśli nie musisz koniecznie zwracać elementu najpierw, ale nadal chcesz funkcji jQuery, możesz zrobić $($("selection").get(index)).

danej sytuacji, to powinien działać dobrze:

// 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>"); 
}); 

co jest równoznaczne z tym:

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

I tak:

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

---

muszę nie zgodzić się z Ryan, pracując nad wyborem CSS ciąg do filtrowania wyniku jest dość drogi w porównaniu do natywnej funkcjonalności tablicy JavaScript.

Answer 4

Musisz podać indeks elementu, z którym chcesz pracować.

Jeśli selektor zwraca więcej niż jeden element można wykonać jedną z kilku rzeczy ... można izolować swoich elementów, dając im klasy lub identyfikator atrybutu w HTML i zmieniać wybierak, aby wybrać tylko klasa/id elementu/elementów, które chcesz wybrać, lub możesz określić indeks elementu, z którym próbujesz pracować. Późniejsza metoda jest nieco niechlujna, ale działa tak długo, jak długo twoja struktura strony nigdy się nie zmienia.

Tak na pierwszy sposób rozmawiałem z was by zmienić selektor do tego po zastosowaniu klasy/id do elementów:

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

dla drugiej metodzie wspominałem chcesz zmienić wybieraka to:

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

Gdzie indeks jest indeksem opartym na zeru elementu, który próbujesz wybrać.

Answer 5

Trzeba połączyć pierwszy() z jednym():

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

Bardziej ogólnie:

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