Como encontrar o filho de um elemento HTML no jQuery

Elementos HTML incluem qualquer parte de uma página da web, como cabeçalhos, tabelas, imagens e parágrafos. Quando você entrelaça variáveis ​​HTML uma dentro da outra, você cria elementos pai e filho. O elemento superior é o pai, enquanto todos os elementos intercalados se tornam filhos. No jQuery, você pode obter o filho de um elemento usando a função "children ()" (filho, em inglês), mas você deve percorrer a matriz de valores criada pela função.

Verifique se o seu código inclui uma referência à biblioteca jQuery antes de tentar executar o script no jQuery. Adicione este código dentro das "" variáveis ​​(cabeçalho) da sua página web, se você não vê a referência:

Adicione algumas variáveis ​​de script abaixo da referência da biblioteca jQuery e grave uma função para verificar se a página terminou de ser carregada. Todo o seu script deve estar entre as chaves desta função:

$ (function () {});

Selecione o elemento HTML necessário para obter uma lista de elementos filhos dele. Por exemplo, se você deseja obter filhos de uma lista não ordenada, selecione o elemento "ul". Acrescente o seletor com a função "children ()" para obter o filho:

$ ('ul.level-2'). children ();

O exemplo anterior selecionará qualquer lista não ordenada que tenha um nome de classe "level-2". No entanto, quando "children ()" encontrar vários elementos filho, ele criará uma matriz de valores. Você precisará de códigos especiais para processar uma matriz.

Acrescente "children ()" com "each ()" (each) para percorrer a matriz de elementos filhos. Como é uma estrutura de loop, você precisa de uma variável de contador, mas não deve criá-la antecipadamente no jQuery. Passe "i" como um argumento em cada "each ()" para obter seu contador:

$ ('ul.level-2'). children (). each (função (i) {});

Declare uma variável que manterá o valor de texto de cada elemento filho. Você pode obter outros valores de elementos, mas o texto retornará qualquer texto encontrado dentro do filho e será útil para obter dados. Defina a variável como "$ (this)" (this) para obter o elemento atual no qual a função "each ()" está trabalhando. Anexe "$ (this)" com "text ()" (texto) para obter o texto:

var childEl = $ (this) .text ();

Emita os valores em sua página selecionando um elemento e acrescente "append ()" (anexo) para que a função "each ()" possa continuar adicionando os valores encontrados:

$ ('div'). append (i + ":" + childEl + "");

Neste exemplo, "childEl" é emitido para uma série de variáveis ​​"". Cada vez que o jQuery repete os códigos dentro de "each ()", ele emite o número de "i", adiciona um par de ponto-e-vírgula, gera o valor de "childEl" e termina a linha com uma variável de script.

Seu script final deve ficar assim:

$ (function () {$ ('ul.level-2'). children (). each (função (i) {var childEl = $ (this) .html (); $ ('div'). + ":" + childEl + "");});});

Conselho

Adicione "console.log (childEl);" dentro de cada função "each ()" na última linha. Use o Firebug no Firefox ou no Console JavaScript no Google Chrome para verificar os valores em um console durante a depuração.

Substitua "text ()" por "html ()" para obter o código HTML dos elementos filhos.