Przeglądanie jQuery - metoda closest()

Przeglądarka jQuery - podręcznik przeglądania

Przykład

Ten przykład pokazuje, jak można przeprowadzić delegowanie wydarzeń za pomocą metody closest(). Kiedy najbliższy element listy lub jego potomkowie są kliknięte, tło zmienia się na żółte:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Spróbuj sam

Definicja i zastosowanie

Metoda .closest() uzyskuje pierwszy element przodka pasujący do selektora, zaczynając od bieżącego elementu, przechodząc w górę drzewa DOM.

Gramatyka

.closest(selector)
Parametry Opis
selector Wartość ciągła, zawierająca wyrażenie selektora pasującego do elementu.

Szczegółowe wyjaśnienie

Jeśli podano obiekt jQuery reprezentujący zbiór elementów DOM, metoda .closest() pozwala na pobranie tych elementów oraz ich przodków z drzewa DOM i utworzenie nowego obiektu jQuery z elementami pasującymi..parents() Podobnie jak metoda .closest(), obie przechodzą w górę drzewa DOM. Różnica między nimi, mimo że subtelna, jest ważna:

.closest() .parents()
Zaczyna od bieżącego elementu Zaczyna od elementu nadrzędnego
Przechodzi po drzewie DOM w górę, aż znajdzie element pasujący do zastosowanego selektora. Przechodzi po drzewie DOM w górę, aż do elementu korzenia dokumentu, dodając każdy element przodka do tymczasowego zbioru; jeśli zastosowano selektor, zbior ten zostanie przefiltrowany na podstawie tego selektora.
Zwraca obiekt jQuery zawierający zero lub jeden element Zwraca obiekt jQuery zawierający zero, jeden lub wiele elementów

Proszę spojrzeć na poniższy fragment HTML:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Przykład 1

Załóżmy, że wykonujemy wyszukiwanie elementu <ul> zaczynające się od elementu A:

$('li.item-a').closest('ul').css('background-color', 'red');

Spróbuj sam

To zmieni kolor <ul> na poziomie 2, ponieważ jest to pierwszy napotkany element podczas przechodzenia po drzewie DOM w górę.

Przykład 2

Załóżmy, że szukamy elementu <li>:

$('li.item-a').closest('li').css('background-color', 'red');

Spróbuj sam

To zmieni kolor elementu listy A. Zanim .closest() metoda zacznie przechodzić po drzewie DOM w górę, zaczyna od samego elementu li i kontynuuje, aż znajdzie element A.

Przykład 3

Możemy przekazać element DOM jako kontekst, w którym szukamy najbliższego elementu.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Spróbuj sam

Powyższy kod zmieni kolor <ul> na poziomie 2, ponieważ jest zarówno pierwszym przodkiem elementu A, jak i potomkiem elementu II. Nie zmieni koloru <ul> na poziomie 1, ponieważ nie jest potomkiem elementu list item II.

Przeglądarka jQuery - podręcznik przeglądania