jQuery-läpikäynti - find() -menetelmä

jQuery verkkojen läpikäymisohje

Esimerkki

Etsi kaikki lukuissa olevat jälkeläisspan-elementit ja aseta niiden väri punaiseksi:

$("p").find("span").css('color','red');

Kokeile itse

Määritelmä ja käyttö

find() -menetelmä hankkii nykyisen elementtijoukon jokaisen elementin jälkeläiset valitsemalla valitsinlauseella, jQuery-objektilla tai elementillä.

Syntaksi

.find(selector)
Parametrit Kuvaus
selector Merkistöarvo, joka sisältää valitsinlauseen, jota käytetään nykyisen elementtijoukon sopivuuden tarkistamiseen.

Yksityiskohtainen selitys

Jos annetaan jQuery-objekti, joka edustaa DOM-elementtien joukkoa, .find() -menetelmä mahdollistaa näiden elementtien jälkeläisten hakemisen DOM-puusta ja uuden jQuery-objektin rakentamisen vastaavista elementeistä. .find() on samanlainen kuin .children() -menetelmä, mutta jälkimmäinen kulkee vain DOM-puun yhdellä tasolla.

.find() -menetelmän ensimmäinen merkittävä ominaisuus on, että se hyväksyy valitsinlauseen, joka on samaa tyyppiä kuin $() -funktioon välitetty lauseke. Elementtejä suodellaan testaten, vastaavatko ne valitsinlauseesta.

Käsittele seuraavaa yksinkertaista sisäkkäistä luetteloa:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

Aloitetaan hausta luettelosta II alkaen:

$('li.item-ii').find('li').css('background-color', 'red');

Kokeile itse

Tämän tutkimuksen tuloksena projektit A, B, 1, 2, 3 ja C on asetettu punaiseksi taustaväriksi. Vaikka projekti II vastaa valitsinlauseeseen, sitä ei sisällytetä tuloksiin; ainoastaan jälkeläisiin tehdään yhteensopivuustarkistus.

Eri kuin muihin puun läpikäymismenetelmiin, valitsinlause on .find() -menetelmän välttämätön parametri. Jos halutaan hakea kaikki jälkeläiset, voidaan siirtää tähti-valitsin '*'.

Valitsin konteksti on .find() -menetelmän toteuttama; siksi $('li.item-ii').find('li') on sama kuin $('li', 'li.item-ii').

jQuery 1.6:ssa voidaan käyttää annettua jQuery-kokoelmaa tai elementtiä suodattamiseen. Edelleen yllä oleva sisäkkäinen luettelo, kirjoitetaan ensin näin:

var $allListElements = $('li');

Tämän jälkeen siirretään tämä jQuery-objekti find-metodiin:

$('li.item-ii').find( $allListElements );

Kokeile itse

Yllä oleva koodi palauttaa jQuery-kokoelman, joka sisältää luettelon II-lapsista.

Samalla tavalla voidaan myös siirtää elementtiä:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

Kokeile itse

Tämän kutsun tuloksena projekti 1 on asetettu punaiseksi taustaväriksi.

jQuery verkkojen läpikäymisohje