jQuery-selailu - parent()-menetelmä

esimerkki

etsitään jokaisen kappaleen isäntäelementti, jolla on "selected"-luokka:

$("p").parent(".selected")

Kokeile itse

Määritelmä ja käyttö

parent() hakee jokaisen nykyisen sopivan elementin isäntäelementin, valitsinlausekkeen käyttö on valinnainen.

.parent(selector)
parametri kuvaus
selector Merkkijonoväli, joka sisältää valitsinlausekkeen, jota käytetään elementin matchaamiseen.

Yksityiskohtainen selitys

Jos annetaan jQuery-objekti, joka edustaa DOM-elementtien joukkoa, .parent()-menetelmä mahdollistaa näiden elementtien isäntäelementtien etsimisen DOM-puusta ja luo uuden jQuery-objektin vastaavista elementeistä..parents() Kuten .parent()-menetelmä, mutta erona on, että jälkimmäinen siirtyy DOM-puun vain yhdelle tasolle ylös.

Tämä menetelmä hyväksyy valinnaisen valitsinlausekkeen, joka on samaa tyyppiä kuin parametrit, jotka välitetään $()-funktioon. Jos valitsinlauseke on sovellettu, elementtejä suodellaan tarkistamalla, vastaako elementti valitsinlauseketta.

Kuvittele tämä sivu, jossa on perustavanlaatuiset sisäkkäiset listat:

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

Jos aloitamme projektista A, voimme löytää sen isäntäelementin:

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

Kokeile itse

Tämä kutsun tulos on, että asetetaan level-2-listan taustaväri punaiseksi. Koska emme sovellaneet valitsinlausekkeita, isäntäelementti tuli luonnollisesti osaksi objektia. Jos valitsinlauseke on sovellettu, tarkistetaan ennen sisältöelementin sisäänottoa, vastaako elementti valitsinlauseketta.