jQuery - odpowiednik each(), ale dla pojedynczego elementu

Question

Co to jest równoważne dla każdego jQuery():

$(".element").each(function(){ 
    // do stuff 
}); 

podczas dołączania funkcji do jednego elementu, jak #element?

Answer 1

Zawsze można odwołać się do obiektu jQuery w zmiennej:

var $el = $('#element'); 

... następnie manipulować.

$el.doSomething();   // call some jQuery methods from the cached object 
$el.doSomethingElse(); 

Jeśli powodem chciał .each() było odwołać się do elementu DOM jako this, naprawdę nie potrzeba słowa kluczowego this to zrobić, wystarczy chwycić element DOM z obiektu jQuery.

var element = $('#element')[0];  // both of these give you the DOM element 
var element = $('#element').get(0); //  at index 0 

Dwa z nich są równoważne i pobierze elementu DOM, który będzie się odwoływać jako this w .each().

alert(element.tagName); // alert the tagName property of the DOM element 
alert(element.id);  // alert the ID property of the DOM element 

---

Chciałbym zauważyć, że niekoniecznie jest złe korzystać każdy iteracyjne nad pojedynczy element.

Korzyści są takie, że masz łatwy dostęp do elementu DOM i możesz to zrobić w nowym zakresie, aby nie zaśmiecać otaczającej przestrzeni nazw zmiennymi.

Istnieją również inne sposoby, aby to osiągnąć. Weźmy ten przykład:

(function($) { 

    // Inside here, "this" will refer to the DOM element, 
    // and the "$" parameter, will reference the jQuery library. 

    alert(this.tagName); 

    // Any variables you create inside will not pollute the surrounding 
    //  namespace. 

    var someVariable = 'somevalue'; // is local to this function 

}).call($('#element')[0], jQuery); 

Answer 2

Aby odpowiedzieć na to pytanie bezpośrednio, .each() pracuje normalnie na zestawy elementów o dowolnym rozmiarze, w tym 1.

Można również pominąć wezwanie .each() całkowicie i po prostu wywołać metody jQuery na $('#element'). Pamiętaj, że możesz łańcuchować większość, jeśli nie wszystkie wywołania metod jQuery, gdy zwracają obiekt jQuery. Działa to nawet w wielu elementach, w zależności od metod.

$('#element').doSomething().doSomethingElse(); 

Jeśli trzeba odwoływać się do obiektów, wiele razy, zrobić zmiennej:

var $elm = $('#element'); 
$elm.doSomething(); 
doSomethingElse($elm); 

Answer 3

Jeśli jest tylko jeden element można go normalnie dostęp za pomocą przełącznika.

$('#your_element').your_event(function() { 

}); 

Answer 4

Czy to znaczy, jak $ ('# Element'). Dzieci(). Each() zakładając, że masz coś w rodzaju ul z identyfikatorem i chcesz za każdym wnętrzu Li?

Answer 5

Użyj first().

each() pasuje do wszystkich elementów, podczas gdy first() dopasowuje tylko pierwszy.

Istnieją również inne selektory. Gdy użyjesz id w selektorze, dostaniesz tylko jeden element. Jest to główna różnica między .element i #element. Pierwsza to klasa, która może być przypisana do wielu elementów, podczas gdy druga to id, który należy tylko do (najwyżej) jednego elementu.

Nadal można użyć każdego z nich, jeśli zwrócono tylko jeden element (lub 0). Możesz także pominąć wszystkich, jeśli chcesz połączyć wydarzenie. Używasz each, gdy chcesz wykonać określoną funkcję dla każdego elementu na liście elementów.

Answer 6

Za kulisami each tylko for że iteracji pętli każdego elementu w map zwrócony przez jQuery.

Zasadniczo jest to ^{i sztylet;} to samo, co:

var i, map = $('...selector...'); 
for (i = 0; i < map.length; i++) 
{ 
    someFunction(i, map[i]); 
} 

& sztylet; Jest w tym coś więcej, włączając wywoływanie funkcji w kontekście elementu mapy itp.

Jego implementacja polega na zapewnieniu wygodnego sposobu wywoływania funkcji elementu each w zaznaczeniu.