jQuery doorzoeken - closest() methode

jQuery Traversing Reference Manual

Voorbeeld

Dit voorbeeld demonstreert hoe je event delegation met closest() kunt voltooien. Wanneer het dichtstbijzijnde lijstelement of een van zijn nakomelingen wordt geklikt, wordt de gele achtergrond omgeswitcht:

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

Try it yourself

Definitie en gebruik

De closest() methode haalt het eerste ouder-element op dat overeenkomt met de selector, begint bij het huidige element en bekijkt het DOM-beschaafsel omhoog.

Syntax

.closest(selector)
Parameter Beschrijving
selector String-waarde, die een selector-expressie bevat die overeenkomt met het element.

Uitleg

Als een jQuery object wordt gegeven dat een verzameling DOM-elementen vertegenwoordigt, laat de .closest() methode ons toe om deze elementen en hun ouder-elementen in het DOM-beschaafsel te verkrijgen en een nieuw jQuery object te construeren met behulp van de overeenkomende elementen..parents() Soortgelijk aan de .closest() methode, ze beiden bekijken het DOM-beschaafsel omhoog. De verschillen zijn subtiel, maar belangrijk:

.closest() .parents()
Begint bij het huidige element Begint bij het ouder-element
Bekijk het DOM-beschaafsel omhoog tot de eerste overeenkomstige element die een selector heeft toegepast. Bekijk het DOM-beschaafsel omhoog tot de wortselement van het document, voeg elke ouder-element toe aan een tijdelijke verzameling; als een selector is toegepast, wordt deze verzameling gescreend op basis van die selector.
Geef een jQuery object terug dat bestaat uit nul of één element Geef een jQuery object terug dat bestaat uit nul, één of meerdere elementen

Bekijk het volgende 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>

Example 1

Assuming we perform a search from item A for the <ul> element:

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

Try it yourself

This will change the color of the level-2 <ul>, because it is the first element encountered when traversing the DOM tree upwards.

Example 2

Assuming we are searching for the <li> element:

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

Try it yourself

This will change the color of list item A. Before traversing the DOM tree upwards, the .closest() method starts searching from the li element itself until it matches item A.

Example 3

We can pass a DOM element as context, in which to search for the closest 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');

Try it yourself

The above code changes the color of the level-2 <ul> because it is both the first <ul> ancestor of list item A and also a descendant of list item II. It does not change the color of the level-1 <ul> because it is not a descendant of list item II.

jQuery Traversing Reference Manual