jQuery-selailu - offsetParent()-menetelmä

Esimerkki

Aseta luokan nimeltä item-a olevan li-elementin lähimmän sijoitetun isovanhemman taustaväri:

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

Kokeile itse!

Määritelmä ja käyttö

offsetParent() palauttaa lähimmän sijoitetun isovanhemman.

Syntaksi

.offsetParent()

Yksityiskohtainen selitys

Jos annetaan jQuery-objekti, joka edustaa DOM-elementtien joukkoa, .offsetParent()-menetelmä mahdollistaa etsinnän DOM-puun isovanhempia ja rakentaa jQuery-objektin, joka on suljettu lähimmän sijoitetun isovanhemman ympärillä. Sijoitetut elementit tarkoittavat, että elementin CSS-position-ominaisuus on asetettu relative, absolute tai fixed. Tämä tieto on hyödyllistä animaatioiden suorittamisen aikana ja kun objekteja sijoitetaan sivulle.

Mieti sivua, jossa on perusnестованая lista ja sijoitetut elementit:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">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 sijoitetut isovanhemmat:

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

Kokeile itse!

Tämä muuttaa kohdistetun projektin II taustavärin.