10 funções de travessia muito úteis em jQuery

Usando jQuery , você pode selecionar facilmente elementos HTML . Mas às vezes, quando a estrutura HTML é mais complexa, refinar os elementos que escolhemos é algo problemático. Neste tutorial, exploraremos dez maneiras de refinar e expandir as coleções com as quais trabalharemos.

HTML

Primeiro, vamos dar uma olhada na página simples mostrada abaixo, e através deste tutorial selecionaremos os elementos.

1. div.container é o elemento de empacotamento;
2. div.photo , div.title e div.rating são filhos diretos de div.container ;
3. Cada div.star é filho de div.rating ;
4. Quando a classe de div.satr está "on" , é uma sta completa
5. .
6. Por que atravessar?

   " Por que precisamos refinar ainda mais uma série de elementos? É porque a sintaxe de seleção do jQuery não é poderosa o suficiente? "

   Ok, vamos começar com um exemplo. Na página mencionada acima, quando uma estrela é clicada, precisamos adicionar a classe "on" a ela e cada estrela à esquerda . Ao mesmo tempo, queremos alterar a cor de fundo de todos os elementos pai estrela , então nosso código é o seguinte:

   Na segunda linha, obtemos o objeto atual em que clicamos. Mas como conseguir o pai das estrelas ? Isso é div.rating . Porém, em uma página, existem muitos div.rating . Qual deles queremos? Como colocar todas as estrelas à esquerda de “this” ?

   A boa notícia é que o jQuery nos permite obter novas coleções de elementos com base em coleções existentes com base nesses relacionamentos básicos. E é aqui que as funções de travessia entram em ação.

   1. crianças

   Esta função obtém os filhos diretos de um conjunto de elementos.

   Isso pode ser muito conveniente em muitas situações, dê uma olhada na imagem abaixo:

   1. No início, todas as estrelas do contêiner são selecionadas;
   2. Passe uma expressão de seleção para children() para restringir os resultados da seleção à estrela selecionada ;
   3. Se children() aceitar algum parâmetro, todos os filhos diretos serão retornados;
   4. Os elementos netos não são retornados.
   5. 

   $('.star').click(function(){

            $(this).addClass('on');

   //        Como selecionar o elemento pai do objeto atual ?

   //        Como colocar todas as estrelas à esquerda da estrela atual ?

   });