jQuery: Como chegar a um filho específico de um pai?

92

Para dar um exemplo simplificado, tenho o seguinte bloco repetido na página muitas vezes (é gerado dinamicamente):

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

Quando clicado, posso chegar ao pai do link com:

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

No entanto ... eu preciso chegar ao <div class="something1">daquele pai em particular.

Basicamente, alguém pode me dizer como me referir a um irmão de nível superior sem ser capaz de me referir a ele diretamente? Vamos chamá-lo de irmão mais velho. Uma referência direta ao nome da classe do irmão mais velho faria com que cada instância desse elemento na página desaparecesse - o que não é o efeito desejado.

Eu tentei:

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

Qualquer um? Obrigado.

jquery jquery-selectors parent siblings Tom
fonte
A resposta de Anurag pode não parecer a certa - certamente me fez parar e pensar - mas está apontando um erro de digitação flagrante em seu código que está causando a falha do seletor. O seletor, em jQuery, .parent() não é.parents()
David diz restabelecer Monica,
@ricebowl: Errado. api.jquery.com/parents
SLaks
@ricebowl ... parent () me daria div something2, então preciso que pais () cheguem à div box.
Tom,
Ah; me desculpe. Umm ... Não sei se é melhor deixar minha ignorância em evidência ou deletar o erro para não incomodar mais ninguém ... = | Mesmo assim, pelo menos aprendi algo útil hoje; esse é o ponto, certo ..? =)
David diz para restabelecer Monica,
1
@ricebowl, não se preocupe, obrigado por contribuir.
Tom,

Respostas:

144

A chamada .parents(".box .something1")retornará todos os elementos pais que correspondem ao seletor .box .something. Em outras palavras, ele retornará os elementos pais que estão .something1e estão dentro de .box.

Você precisa obter os filhos do pai mais próximo, assim:

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

Este código chama .closestpara obter o pai mais interno correspondendo a um seletor e, em seguida, chama .childrenesse elemento pai para encontrar o tio que você está procurando.

SLaks
fonte
Eu sei que isso é um pouco antigo, mas não é melhor neste caso usar parent () em vez de mais próximo (), pois imagino que haja mais travessia de árvore com o próximo () ?
rmorse
1
@acSlater: Ele precisa atravessar a árvore. parent()é o elemento errado.
SLaks
Ah sim, é do pai (). Pai () que o Tom precisa, desculpe! :)
rmorse
1
@acSlater: Sim; Isso funcionaria. Porém, torna o Javascript muito mais acoplado à estrutura HTML. .closest(...)é mais resiliente e legível também.
SLaks
7
Caso alguém esteja se perguntando: depois de encontrar o pai certo usando .closest (), se estiver procurando por um elemento filho que NÃO seja filho direto (mas filho de um filho, por exemplo), use. find () no lugar de .children.
Fabien Snauwaert
17 
$(this).parent()

Percorrer a árvore é divertido

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

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

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

E de muitas outras maneiras, esses documentos podem ser úteis.

Anurag
fonte
Obrigado, mas não estava procurando pelo pai, mas sim por outro filho dos pais (ou avós, na verdade).
Tom,
Hehe ... é um caso de família, de fato.
Tom,
13

Isso encontrará o primeiro pai com classe, em boxseguida, encontrará a primeira classe filho com correspondência regex somethinge obterá o id.

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

Se entendi seu problema corretamente, $(this).parents('.box').children('.something1')é isso que você está procurando?

Teja Kantamneni
fonte
5

Você pode usar .each()com .children()e um seletor entre parênteses:

//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
fonte