jQuery-besøg - closest() metode

jQuery 遍历参考手册

Eksempel

Dette eksempel viser, hvordan man udfører event delegation ved hjælp af closest(). Når den nærmeste listeelement eller et underelement af denne listeelement bliver klikket på, ændres gult baggrund:

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

Prøv det selv

DefinITION OG BRUG

closest() metoden får den første forælder, der matcher selectoren, fra det aktuelle element og navigerer opad i DOM-træet.

Syntaks

.closest(selector)
Parameter Beskrivelse
selector Strengværdi, der indeholder selectorudtrykket for det matchende element.

Detaljeret forklaring

Hvis der gives en jQuery-objekt, der repræsenterer en DOM-elementkollektion, tillader .closest() metoden os at hente disse elementer og deres forældre i DOM-træet, og opbygge en ny jQuery-objekt med matchende elementer..parents() Ligesom .closest() metoden navigerer de begge opad i DOM-træet. Forskellen er subtil, men vigtig:

.closest() .parents()
Begynd fra det aktuelle element Begynd fra forælderelementet
Naviger opad i DOM-træet, indtil en matchende element er fundet med selectoren. Naviger opad i DOM-træet, indtil rodelementet findes, og tilføj hver forælderelement til en midlertidig samling; hvis en selector er anvendt, vil denne samling filtreres baseret på selectoren.
Returnerer en jQuery-objekt, der indeholder ingen eller en element Returnerer en jQuery-objekt, der indeholder ingen, en eller flere elementer

Se nedenstående HTML-fragment:

<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>

Eksempel 1

Antag, at vi udfører en søgning efter <ul>-elementer fra projekt A:

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

Prøv det selv

Dette vil ændre farven på level-2 <ul>, fordi det er det første element, der mødes, når man traverserer DOM-træet opad.

Eksempel 2

Antag, at vi søger efter <li>-elementer:

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

Prøv det selv

Dette vil ændre farven på listeelement A. Før .closest() metoden begynder at traversere DOM-træet, starter den søgningen fra li-elementet selv, indtil det matcher projekt A.

Eksempel 3

Vi kan passere en DOM-element som kontekst, hvor vi søger efter den nærmeste element.

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');

Prøv det selv

Denne kode vil ændre farven på level-2 <ul>, fordi den både er den første <ul>-forælder til listeelement A og arving til listeelement II. Den vil ikke ændre farven på level-1 <ul>, fordi den ikke er arving til listeelement II.

jQuery 遍历参考手册