jQuery przechodzenie - metoda end()

Przewodnik po遍历 jQuery

Przykład

Wybierz wszystkie akapity, znajdź elementy span w tych akapitach i przywróć je do akapitów, ustawiając ramkę na 2 piksele czerwonego koloru:

$("p").find("span").end().css("border", "2px red solid");

Spróbuj sam

Definicja i użycie

Metoda end() kończy najbliższe działanie filtrowania w łańcuchu i przywraca zbiór elementów do poprzedniego stanu.

Gramatyka

.end()

Szczegółowe wyjaśnienie

Większość metod przechodzenia jQuery operuje na instancji obiektu jQuery i tworzy nowy obiekt, który pasuje do zbioru różnych elementów DOM. Gdy ma to miejsce, powinniśmy włożyć nowy zbiór elementów do stosu utrzymywanego w obiekcie. Każdy sukcesywny wywołanie metody filtrowania włoży nowy element do stosu. Jeśli potrzebujemy starego zbioru elementów, możemy użyć metody end() do wyrzucenia nowej kolekcji ze stosu.

Załóżmy, że na stronie znajdują się pary krótkich list:

<ul class="first">
   <li class="foo">element listy 1</li>
   <li>element listy 2</li>
   <li class="bar">element listy 3</li>
</ul>
<ul class="second">
   <li class="foo">element listy 1</li>
   <li>element listy 2</li>
   <li class="bar">element listy 3</li>
</ul>

Przykład 1

jQuery jest szczególnie przydatny, gdy używa się jego atrybutu łańcucha poleceń (łańcucha poleceń). Bez używania łańcucha poleceń, zazwyczaj wywołujemy poprzednie obiekty za pomocą nazw zmiennych, co pozwala nam uniknąć operacji na stosie. Jednakże, poprzez end(), możemy łączyć wszystkie wywołania metod w jeden ciąg:

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

Spróbuj sam

To polecenie sekwencji wyszukuje pierwsze elementy z klasą foo i ustawia ich tło na czerwone. Funkcja end() przywraca obiekt do stanu przed wywołaniem find(), więc drugie find() wyszukuje '.bar' wewnątrz <ul class="first">, a nie w li class="foo", i ustawia kolor tła na zielony dla elementów pasujących. Ostateczny wynik to ustawienie koloru tła na elementach 1 i 3 w pierwszej liście, podczas gdy elementy w drugiej liście nie ulegają zmianie.

Przykład 2

Ta długa sekwencja jQuery może być wizualizowana jako strukturyzowany blok kodu, metoda filtracji otwiera wewnętrzne bloki kodu, a metoda end() służy do ich zamknięcia:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

Spróbuj sam

Ostatnia funkcja end() nie jest obowiązkowa, ponieważ potem zrezygnujemy z tego obiektu jQuery. Jednakże, jeśli pisać kod w tej formie, end() może dostarczyć wizualnej symetrii oraz uporządkować kod, przynajmniej dla deweloperów, co ułatwia jego czytanie, co wiąże się z pewną stratą wydajności z powodu dodatkowych wywołań.

Przewodnik po遍历 jQuery