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

padre de un div

Question

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>

Al hacer clic, puedo llegar al padre del enlace con:

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

Sin embargo ... Necesito llegar a la <div class="something1"> de ese padre en particular.

Básicamente, ¿alguien me puede decir cómo hacer referencia a un hermano de un nivel superior sin poder referirse a él directamente? Vamos a llamarlo hermano mayor. Una referencia directa al nombre de clase del hermano mayor provocaría que cada instancia de ese elemento en la página se desvanezca, lo que no es el efecto deseado.

He intentado:

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

¿Nadie? Gracias.

Answer 1

Esto encontrará al primer padre con el box clase box luego encontrará la primera clase hija con expresiones regulares que coincidan con something y obtenga el ID.

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

Answer 2

Llamar a .parents(".box .something1") devolverá todos los elementos principales que coincidan con el selector .box .something . .box .something . En otras palabras, devolverá elementos principales que son .something1 y están dentro de .box .

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

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

Este código llama a .closest para que el padre más .closest haga coincidir un selector, luego llama a .children en ese elemento principal para encontrar al tío que está buscando.

Answer 3

Puede usar .each() con .children() y un selector dentro del 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();
});

Answer 4

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

Answer 5

$(this).parent()

Tree Traversal es divertido

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

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

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

Y muchas otras formas, puede encontrar estos docs útiles.