jQuery: ¿Cómo llegar a un hijo particular de un padre?

92

Para dar un ejemplo simplificado, tengo el siguiente bloque repetido en la página muchas veces (se genera dinámicamente):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

Cuando se hace clic, puedo acceder al padre del enlace con:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Sin embargo ... necesito llegar al <div class="something1">de ese padre en particular.

Básicamente, ¿alguien puede decirme cómo referirme a un hermano de nivel superior sin poder referirme a él directamente? Llamémoslo hermano mayor. Una referencia directa al nombre de la clase del hermano mayor haría que todas las instancias de ese elemento en la página desaparecieran, lo que no es el efecto deseado.

He intentado:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

¿Nadie? Gracias.

— Tom
fuente

La respuesta de Anurag puede no parecer la correcta, ciertamente me hizo detenerme y pensar, pero está señalando un error tipográfico flagrante en su código que está causando que su selector falle. El selector, en jQuery, .parent() no es.parents()

— David dice reinstalar a Monica

@ricebowl: Incorrecto. api.jquery.com/parents

— SLaks

@ricebowl ... parent () me daría algo div 2, así que necesito padres () para llegar al cuadro div.

— Tom

Ah; mis disculpas. Umm ... No sé si es mejor dejar mi ignorancia a la vista o borrar el error para no molestar a nadie más ... = | Aún así, al menos hoy he aprendido algo útil; ese es el punto, ¿verdad ..? =)

— David dice reinstalar a Monica

1

@ricebowl, no te preocupes, gracias por contribuir.

— Tom

144

La llamada .parents(".box .something1")devolverá todos los elementos principales que coincidan con el selector .box .something. En otras palabras, devolverá elementos padre que están .something1y están dentro de .box.

Necesita obtener los hijos del padre más cercano, así:

$(this).closest('.box').children('.something1')

Este código llama .closestpara que el padre más interno coincida con un selector, luego llama .childrena ese elemento padre para encontrar al tío que está buscando.

— SLaks
fuente

Sé que esto es un poco antiguo, pero ¿no es mejor en este caso usar parent () en lugar de más cercano () ya que imagino que hay más recorrido de árbol con más cercano () ?

— rmorse

1

@acSlater: Necesita atravesar árboles. parent()es el elemento incorrecto.

— SLaks

¡Ah, sí, es parent (). Parent () que Tom necesita disculparse! :)

— rmorse

1

@acSlater: Sí; eso funcionaria. Sin embargo, hace que Javascript esté mucho más acoplado a la estructura HTML. .closest(...)es más resistente y más legible también.

— SLaks

8

En caso de que alguien se esté preguntando: después de haber encontrado al padre correcto usando .closest (), si está buscando un elemento hijo que NO sea un hijo directo (sino un hijo de un hijo, por ejemplo), simplemente use. find () en lugar de .children.

— Fabien Snauwaert

17

$(this).parent()

Atravesar árboles es divertido

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

Y de muchas más formas, estos documentos pueden resultarle útiles.

— Anurag
fuente

Gracias, pero no estaba buscando al padre, sino a otro hijo del padre (o abuelo en realidad).

— Tom

Jeje ... es un asunto de familia de hecho.

— Tom

13

Esto encontrará el primer padre con clase, boxluego encontrará la primera clase secundaria con coincidencia de expresiones regulares somethingy obtendrá la identificación.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

— user2601995
fuente

6

Si entendí correctamente su problema, $(this).parents('.box').children('.something1')¿es esto lo que está buscando?

— Teja Kantamneni
fuente

5

Puede usar .each()con .children()y un selector entre paréntesis:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});

— Olly
fuente