jQuery-bearbetning - closest() metod

jQuery 遍历参考手册

Exempel

Detta exempel visar hur closest() kan användas för att genomföra eventdelegation. När närmaste listelement eller dess underordnade element klickas på, växlas en gyllene bakgrund:

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

Prova själv

Definition och användning

closest() metoden får den första äldre element som matchar vald seletor, börjar från det aktuella elementet och navigerar upp i DOM-trädet.

Syntax

.closest(selector)
Parameter Beskrivning
selector Strängvärde, innehåller uttrycket för matchande element

Detaljerad förklaring

Om en jQuery-objekt som representerar en DOM-elementkolektion ges, tillåter .closest() metoden oss att hämta dessa element och deras äldre element i DOM-trädet och skapa ett nytt jQuery-objekt med matchande element..parents() Liknande .closest() metoden, de båda navigerar upp DOM-trädet. Skillnaden är subtil men viktig:

.closest() .parents()
Från det aktuella elementet börjar Från föräldrelementet börjar
Beroende på vald seletor filtreras den tillfälliga samlingsinnehållet Beroende på vald seletor filtreras den tillfälliga samlingsinnehållet
Returnerar ett jQuery-objekt som innehåller noll eller en element Returnerar ett jQuery-objekt som innehåller noll, en eller flera element

Se nedanförande 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>

Exempel 1

Anta att vi genomför en sökning från projekt A till <ul>-elementen:

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

Prova själv

Detta kommer att ändra färgen på level-2 <ul>, eftersom det är det första elementet som stöter på när man söker uppåt i DOM-trädet.

Exempel 2

Anta att vi söker efter <li>-element:

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

Prova själv

Detta kommer att ändra färgen på listelement A. Innan .closest() metoden börjar söka uppåt i DOM-trädet, börjar den söka från li-elementet själv tills det matchar projekt A.

Exempel 3

Vi kan överföra DOM-element som kontext, där vi söker efter närmaste 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');

Prova själv

Ovanstående kod kommer att ändra färgen på level-2 <ul>, eftersom det både är den första <ul>-fäder till listelement A och arvinge till listelement II. Det kommer inte att ändra färgen på level-1 <ul>, eftersom det inte är arvinge till listelement II.

jQuery 遍历参考手册