name - jQuery seleccionar ancestro

jquery selector

Question

¿Es posible usar jQuery para seleccionar un antepasado de un elemento?

Margen:

<div id="ancestor-1">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>
<div id="ancestor-2">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>

Guión:

$(".click-me").click(function(){
    // var ancestorId = ???;
    alert(ancestorId)
});

Answer 1

¿Estás buscando parent() ? parent() para el selector de padres. Si es diferente para su escenario, explique cuál es su resultado esperado.

Answer 2

¿Quieres decir algo como esto?

$(''.click-me'').click(function() {
    var $theAncestor = $(this).closest(''#ancestor-1'');
}

Esto buscará a través de todos los ancestros hasta que se encuentre una coincidencia.

closest()

EDITAR:

Jerome, tu pregunta puede ser interpretada de varias maneras. Esto habla del poder y la flexibilidad de jQuery.

Por favor considere lo siguiente.

Primero, para responder a su pregunta, sí, es posible usar jQuery para seleccionar un antepasado de un elemento.

Creo que podemos asumir que eres consciente de la capacidad de jQuery para seleccionar cualquier elemento, ya sea ancestro o descendiente a través de:

$(''#myElement'')

Teniendo en cuenta el ejemplo de "haga clic en mí", si desea que se devuelva un conjunto de todos los ancestros de un elemento, use:

$(this).parents()

o

$(this).parents(selector)

Pero tenga en cuenta que esto atravesará TODOS los ancestros que devuelven todos, o todos los que coinciden cuando se proporciona un selector.

Si desea que le devuelvan el padre inmediato, use:

$(this).parent()

Si sabes qué antepasado necesitas, usa:

$(this).closest(selector)

Pero tenga en cuenta que solo devolverá la primera coincidencia, y si el elemento actual (esto) es una coincidencia, lo devolverá.

Espero que esto ayude.

Answer 3

Intente usar los padres () o más cercanos () en combinación, tal vez, con un selector para determinar qué antepasado debe coincidir. Por ejemplo, encuentra el div más cercano con un id.

$(''.click-me'').click( function() {
      var ancestorId = $(this).closest(''div[id]'');
      alert(ancestorId);
});

Answer 4

Realmente depende de lo que quieras lograr. ¿Quieres buscar todos los ancestros independientemente de la clase utilizada? ¿O desea buscar todos los elementos que son ancestros y tienen cierta clase (ancestor-x en su caso)?

Si desea parent() por los antepasados, simplemente use parent() (hay un excelente ejemplo de cómo recorrer todos los elementos) o parents() que puede usar como:

$(".click-me").click(function(){
    var parentElements = $(this).parents().map(function () {
        return this.tagName;
    })
    // whatever else you want to do with it
});

Probablemente, el mejor enfoque sería usar .parents() hasta que llegues al elemento con cierto id o clase. Realmente depende de lo que quieras hacer.

Answer 5

parent() y parents()

$(".click-me").click(function(){
    var ancestorId = $(this).parent().parent();
    alert(ancestorId)
});

devolvería los divs con los ids

Answer 6

Intente parent() para el elemento primario inmediato.

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});

O los parents() para todos los elementos de antepasados ​​coincidentes.

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});

O closest() para el primer elemento coincidente más cercano (ya sea un antepasado o uno mismo).

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

La diferencia entre los parents() y la closest() es sutil pero importante. closest() devolverá el elemento actual si es una coincidencia; parents() solo devuelven antepasados . No querrás la posibilidad de devolver el elemento actual. closest() también devuelve solo un elemento; parents() devuelve todos los elementos coincidentes.