Méthode offsetParent() de jQuery

Guide de parcour jQuery

Exemple

Définir la couleur de fond de l'élément parent le plus proche de l'élément li de classe item-a :

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

Essayer par vous-même

Définition et utilisation

offsetParent() obtient l'élément ancêtre positionné le plus proche.

Syntaxe

.offsetParent()

Explication détaillée

Si on donne un objet jQuery représentant un ensemble d'éléments DOM, la méthode .offsetParent() nous permet de chercher les ancêtres de l'élément dans l'arbre DOM et de construire un objet jQuery entouré du plus proche ancêtre positionné. Un élément positionné est un élément dont la propriété CSS position est définie sur relative, absolute ou fixed. Cette information est très utile lors du calcul des offsets pour les animations de performance ou de l'placement d'objets sur la page.

Pensez à une page avec une liste imbriquée de base contenant des éléments positionnés :

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

Si nous commençons par l'élément A, nous pouvons trouver ses ancêtres positionnés :

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

Essayer par vous-même

Cela changera la couleur de fond de l'élément cible II.

Guide de parcour jQuery