jQuery-lähestymistapa - closest() -menetelmä

jQuery 遍历参考手册

Esimerkki

Tämä esimerkki näyttää, miten voit käyttää closest() -event delegationia. Kun lähimmäinen luetteloelementti tai sen lapsenlapsi elementti klikataan, keltainen tausta vaihtuu:

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

Kokeile itse

Määritelmä ja käyttö

closest() -menetelmä saa ensimmäisen valitsijan vastaavan isäntälapsen, aloittaen nykyisestä elementistä DOM-puun ylös asti.

Syntaksi

.closest(selector)
Parametrit Kuvaus
selector Merkkijonoarvo, joka sisältää vastaavan elementin valitsinilmauksen

Yksityiskohtainen selitys

Jos annetaan jQuery-objekti, joka edustaa DOM-elementtikokoelmaa, .closest() -menetelmä sallii meidän hakea nämä elementit DOM-puusta sekä niiden isäntälapsen ja käyttää niitä rakentamaan uuden jQuery-objektin..parents() On samanlaisia kuin .closest() -menetelmä, ne molemmat matkustavat DOM-puun ylös asti. Vaikka ero on pieni, se on tärkeä:

.closest() .parents()
Aloitetaan nykyisestä elementistä Aloitetaan isäntälapsen kanssa
Matkustaa DOM-puun ylös asti, kunnes löydetään valitsin, johon on sovellettu valitsinta. Matkustaa DOM-puun ylös asti, kunnes saavutetaan asiakirjan juurelementti, ja lisää jokaisen isäntälapsen väliaikaiseen joukkoon; jos on käytetty valitsinta, valitsin perustuu valitsimeen tämän joukon suodattamiseen.
Palauttaa jQuery-objektin, joka sisältää nollan tai yhden elementin Palauttaa jQuery-objektin, joka sisältää nollan, yhden tai useamman elementin

Katso seuraava HTML-kappale:

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

Esimerkki 1

Oletetaan, että suoritamme etsinnän <ul> -elementistä kohdasta A alkaen:

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

Kokeile itse

Tämä muuttaa level-2 <ul> -väriä, koska se on ensimmäinen kohde, johon törmätään navigoitaessa DOM-puun ylös.

Esimerkki 2

Oletetaan, että etsimme <li> -elementtiä:

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

Kokeile itse

Tämä muuttaa listan kohdan A väriä. Ennen kuin .closest() -menetelmä alkaa navigoida DOM-puun ylös, se alkaa etsimällä li-elementistä itseään, kunnes löytää kohdan A.

Esimerkki 3

Voimme välittää DOM-elementin kontekstin, jossa etsitään lähimmää elementtiä.

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

Kokeile itse

Tämä koodi muuttaa level-2 <ul> -väriä, koska se on sekä listan kohdan A ensimmäinen <ul> -esiväli, että listan kohdan II jälkeläinen. Se ei muuta level-1 <ul> -väriä, koska se ei ole listan kohdan II jälkeläinen.

jQuery 遍历参考手册