Javascript Cada Função

| | | | | | | | | | | | | | | | | | | | | |

jQuery each() é uma maneira concisa de iterar através de elementos DOM. O método Each() foi projetado para ser chamado no objeto jQuery de destino. Um objeto jQuery é um objeto que contém um ou mais elementos DOM e tem acesso a métodos jQuery. Além de cada () ter menos erros, é mais fácil manipular vários elementos DOM.

jQuery cada () requer uma função de retorno de chamada - um função passada para outra função que será executada posteriormente. Na função callback é o acesso ao número de índice do elemento e ao próprio elemento. Você encontrará uma análise mais completa das funções de retorno de chamada.

Aplicar cada () é tão simples quanto qualquer loop JavaScript, mas há pouco espaço para possíveis confusões. Vamos esclarecer esses pontos e examinar a sintaxe. No final deste guia, haverá exemplos de código passo a passo para ver as diferentes maneiras de aplicar jQuery cada ().

O que é jQuery cada ()?

jQuery cada é um processo de loop para a biblioteca jQuery. Ele funciona como um loop JavaScript, iterando sobre elementos DOM. jQuery each() requer uma função de retorno de chamada, e dentro da função de retorno de chamada é onde os elementos DOM podem ser manipulados.

Enquanto dentro do corpo da função de retorno de chamada, instruções condicionais podem ser usado para modificar alguns dos itens selecionados. As instruções condicionais são então... em JavaScript. Isso fornece um nível mais profundo de controle sobre exatamente como os itens são alterados.

Sintaxe jQuery each ()

jQuery each pode ser invocada de duas maneiras. Primeiro, como um método chamado em um item selecionado. A função de retorno de chamada aceita até dois argumentos opcionais: índice e valor. Índice é o número de índice do item atual. Se o elemento atual fosse o primeiro na lista, o número do índice retornaria 0.

o valor argumento refere-se ao elemento atual. É importante notar que, para concatenar um método para o valor, precisamos envolver o valor em um seletor jQuery. colocamos tudo isso em código abstrato para que possamos detalhar a sintaxe .

aqui escolhemos cada

Lembre-se que [object Object] é uma representação string de um objeto. Isso significa que precisamos chamar um método para extrair o valor exato que queremos. No caso acima, estamos usando o método text() para revelar o atributo text do objeto. Leia mais em [object object] para ter uma ideia de ‚Äã‚Äão que exatamente voltou .

O exemplo acima armazena o número de índice seguido pelo atributo text para cada

escrever desta forma também salva o texto do elemento

guia cobre os detalhes das funções de direção.

Exemplos jQuery each()

Vamos expandir os exemplos de sintaxe acima e adicione alguns atributos. Vamos começar com uma renderização HTML básica de uma lista de cores pertencentes a diferentes classes.

Isso torna todos os elementos de texto no DOM Primeiro, vamos começar salvando o texto no console usando as funções de direção e uma função tradicional.

Selecionando apenas é retornado .

Temos os mesmos resultados, mas usando a esta palavra-chave.

podemos usar uma função anônima - uma função sem nome, como callback. Novamente, ele retorna texto vermelho, roxo e azul. Deve-se notar que, embora as funções de direção tenham alguma funcionalidade jQuery, é recomendado usar a notação funcional tradicional para retornos de chamada jQuery.

Agora sabemos como iterar através de uma coleção de artigos. Agora vamos nos divertir e mudar as cores!

< style> .colorSelect {cor: azul; } {.Cor verde: verde; }

Seguindo a página da lista de cores, adicionamos algumas classes ao elemento da página