Como encontrar o filho de um elemento HTML no jQuery

Os elementos HTML incluem qualquer parte de uma página da web, como títulos, tabelas, imagens e parágrafos. Ao inserir variáveis ​​HTML uma na 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 ()”, mas deve passar pela matriz de valores que essa função cria.

Verifique se o seu código inclui uma referência à biblioteca jQuery antes de tentar executar o script no jQuery. Adicione esse código às variáveis ​​”<head>” (cabeçalho) da sua página da web, se você não vir a referência:

<script src = “https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”> </script>

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

<tipo de script = “text / javascript”> $ (function () {}); </script>

Selecione o elemento HTML necessário para obter uma lista de elementos filhos. Por exemplo, se você deseja obter filhos de uma lista bagunçada, selecione o item “ul”. Conecte o seletor com a função “children ()” para obter o child:

$ (‘ul.level-2’). children ();

O exemplo anterior selecionará qualquer lista bagunçada que tenha um nome de classe “nível 2”. No entanto, quando “children ()” encontra vários elementos filhos, ele cria uma matriz de valores. Você precisará de códigos especiais para processar uma matriz.

Anexe “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 argumento em cada “(()” para obter seu contador:

$ (‘ul.level-2’). children (). each (function (i) {});

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

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

Emita os valores em sua página selecionando um elemento e anexando “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 ​​”<div>”. Cada vez que o jQuery repete os códigos dentro de “each ()”, emite o número de “i”, adiciona um ponto-e-vírgula, emite o valor de “childEl” e termina a linha com uma variável hífen.

Seu script final deve ficar assim:

$ (function () {$ (‘ul.level-2’). children (). each (function (i) {var childEl = $ (this) .html (); $ (‘div’). append (i + “:” + childEl + “”);});});

Conselhos

Adicione “console.log (childEl);” dentro de cada função “each ()” na última linha. Use o Firebug no Firefox ou o Console JavaScript no Google Chrome para revisar os valores em um console ao depurar.

Substitua “text ()” por “html ()” para obter o código HTML dos elementos filho.

Referências

 

Você pode estar interessado:

Deixe um comentário