Conteúdo principal
Programação
Curso: Programação > Unidade 7
Lição 4: Técnicas de jQueryRevisão: Coleções jQuery e repetição
Coleções jQuery
Quando você usa jQuery para encontrar elementos, ele retorna um objeto de coleção jQuery:
var $heading = $('h1');É uma prática comum iniciar nomes de variáveis como essa com um sinal de
$ para mostrar que elas estão armazenando objetos de coleção jQuery. Isso ajuda a distingui-las das variáveis que armazenam nós DOM.Se você quiser recuperar o nó DOM de um objeto jQuery, você pode tratar o objeto jQuery como um array e usar a notação de colchetes:
var heading = $heading[0];Se você quiser transformar um nó DOM em um objeto jQuery, você pode passá-lo para uma função jQuery:
var $heading = $(heading);Fazendo repetições em coleções
Se você quiser passar por vários elementos repetidamente em uma coleção, você pode usar um laço
for comum ou o método jQuery each(): $("p").each(function(index, element) {
$(element).text( $(element).text() + "!!");
});Quando você chama a função
each(), você precisa passar uma função callback para ela. O jQuery então vai chamar essa função callback para cada elemento da coleção e vai passar o índice atual e o elemento para a função.O jQuery também define o contexto da função para o elemento atual, o que significa que você pode referenciar o elemento com a palavra reservada
this: $("p").each(function(index, element) {
$(elem).text( $(element).text() + "!!");
);Quer participar da conversa?
O jQuery também define o contexto da função para o elemento atual, o que significa que você pode referenciar o elemento com a palavra reservada this:
$("p").each(function(index, element) {
$(elem).text( $(element).text() + "!!");
);
Pode-me indicar onde está a palavra "this" no código apresentado?(4 votos)- no caso da explicação que ficou vaga, ela é comentada no vídeo anterior. VocÊ ao usar a função each() teria que igualar salvar a variável para uma coleção jQuery, ex acima: var $p = $(this); (você pode conferir no log se está tudo certo usando o console.log(element === this);
estando tudo ok, você aplicaria a repetição, como: $p.text( $(element).text() + "!!")(1 voto)