javascript - create - jquery html

nodo ancestro más cercano en jQuery

Question

En mi experiencia javascript, encontré que es una tarea muy común "buscar el antecesor más cercano de un elemento con alguna condición (nombre de etiqueta, clase, ...)". ¿Puede el método de jquery de los padres () hacer el trabajo? El orden de los elementos devueltos de los padres () es predecible? ¿Es de arriba a abajo o de abajo hacia arriba? Por el momento utilizo esta función de utilidad:

function ancestor(elem, selector) {
  var $elem = $( elem ).parent();
  while( $elem.size() > 0 ) {
    if( $elem.is( selector ) ) 
    return $elem;
    else
       $elem = $elem.parent();
  }
  return null;
}

¿Puede alguien decirme si hay una forma inteligente de hacer el trabajo?

Answer 1

Debes usar el closest , porque los parents no te darán el resultado que esperas si trabajas con múltiples elementos. Por ejemplo, digamos que tienes esto:

    <div id="0">
        <div id="1">test with <b>nested</b> divs.</div>
        <div id="2">another div.</div>
        <div id="3">yet <b>another</b> div.</div>
    </div>

y desea agregar una clase a los divs que tienen un elemento <b> como su hijo inmediato (es decir, 1 y 3). Si usa $(''b'').parents(''div'') , obtiene divs 0, 1 y 3. Si usa $(''b'').parents(''div:first'') , solo obtiene div 1 Para obtener 1 y 3, pero no 0, debe usar $(''b'').closest(elem) .

Answer 2

El más cercano () comienza en el elemento actual, si el padre que está buscando tiene la misma etiqueta que el actual (por ejemplo, ambos son divs), use parent (). closest ()

Answer 3

Editar : desde jQuery 1.3, esto se ha incorporado como la función closest() . por ejemplo: $(''#foo'').closest(''.bar'');

Sí, los padres atraviesan el árbol.

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

$(''#d'').parents("div:first"); seleccionará div b.

Answer 4

Añadiendo a la respuesta de @nickf :

jQuery 1.3 simplificó esta tarea con la closest .

Dado un DOM:

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

Tu puedes hacer:

$(''#d'').closest("div"); // returns [ div#b ]

[ Más cercano devuelve un] conjunto de elementos que contienen el elemento primario más cercano que coincide con el selector especificado, incluido el elemento de inicio.