Método offsetParent() de jQuery para la navegación

Manual de referencia de jQuery para la navegación

Ejemplo

Establecer el color de fondo del elemento ancestor de posicionamiento más cercano del elemento li con el nombre de clase item-a:

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

Prueba personalmente

Definición y uso

offsetParent() obtiene el elemento ancestor de posicionamiento más cercano.

Sintaxis

.offsetParent()

Explicación detallada

Si se proporciona un objeto jQuery que representa una colección de elementos DOM, el método .offsetParent() permite buscar elementos ancestors en el árbol DOM y construir un objeto jQuery que está envuelto por el elemento ancestor de posicionamiento más cercano. Un elemento de posicionamiento es aquel cuyo atributo CSS position se establece en relative, absolute o fixed. Esta información es muy útil al calcular la offset para animaciones de rendimiento o al colocar objetos en la página.

Piensa en una página con una lista anidada básica que contenga elementos de posicionamiento:

<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 comenzamos con el proyecto A, podemos encontrar su elemento ancestor de posicionamiento:

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

Prueba personalmente

Esto cambiará el color de fondo del proyecto II seleccionado.

Manual de referencia de jQuery para la navegación