javascript - first - ¿Cómo obtengo el padre del nivel n-ésimo de un elemento en jQuery?

parent jquery

Question

Cuando quiero obtener, por ejemplo, el padre del tercer nivel del elemento que debo escribir $(''#element'').parent().parent().parent() ¿Hay un método más óptimo para esto?

Answer 1

Como los parents() devuelven una lista, esto también funciona

$(''#element'').parents()[3];

Answer 2

Como los parents() devuelven los elementos antecesores ordenados desde el más cercano a los externos, puede encadenarlo en eq() :

$(''#element'').parents().eq(0);  // "Father".
$(''#element'').parents().eq(2);  // "Great-grandfather".

Answer 3

Depende de tus necesidades, si sabes qué padre buscas, puedes usar el selector .parents ().

EG: http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

Ejemplo usando el índice:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

Answer 4

Es sencillo. Solo usa

$(selector).parents().eq(0); 

donde 0 es el nivel primario (0 es padre, 1 es el padre del padre, etc.)

Answer 5

No encontré ninguna respuesta usando el método closest() y creo que es la respuesta más simple cuando no sabes cuántos niveles sube el elemento requerido, por lo que publica una respuesta:
Puede usar la función closest() combinada con selectores para obtener el primer elemento que coincida al desplazarse hacia arriba desde el elemento:

(''#element'').closest(''div'')    // returns the innermost ''div'' in its parents
(''#element'').closest(''.container'')    // returns innermost element with ''container'' class among parents
(''#element'').closest(''#foo'')    // returns the closest parent with id ''foo''

Answer 6

Podrías usar algo como esto:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

Answer 7

Si planea reutilizar esta funcionalidad, la solución óptima es crear un complemento jQuery:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

Por supuesto, es posible que desee extenderlo para permitir un selector opcional y otras cosas similares.

Una nota: utiliza un índice basado en 0 para padres, por lo que nthParent(0) es lo mismo que llamar a parent() . Si prefiere tener 1 indexación basada, use n-- > 0

Answer 8

Si tienes un div común para padres, puedes usar parentsUntil () link

por ejemplo: $(''#element'').parentsUntil(''.commonClass'')

La ventaja es que no necesita recordar cuántas generaciones hay entre este elemento y el padre común (definido por commonclass).

Answer 9

Solo agrega :eq() selector :eq() como este:

$("#element").parents(":eq(2)")

Simplemente especifique el índice que padre: 0 para padre inmediato, 1 para abuelo, ...

Answer 10

Una forma más rápida es usar javascript directamente, ej.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

Esto funciona significativamente más rápido en mi navegador que encadenando .parent() jQuery .parent() .

Ver: jsperf.com/jquery-get-3rd-level-parent

Answer 11

Usted podría darle al padre objetivo una identificación o clase (por ejemplo, myParent) y la referencia es con $(''#element'').parents(".myParent")

Answer 12

el uso de eq parece captar el DOM dinámico, mientras que el uso de .parent (). parent () parece captar el DOM que se cargó inicialmente (si eso es posible).

Los uso ambos en un elemento que tiene clases aplicadas en onmouseover. eq muestra las clases mientras .parent (). parent () no.

Answer 13

también puedes usar :

$(this).ancestors().eq(n) 

ex: $(this).ancestors().eq(2) -> el padre del padre de this .