WThere estão algumas maneiras para já alterar elementos HTML existentes com jQuery, dependendo do que você deseja alterar. Por exemplo, digamos que você queria mudar o texto dos elementos na página que você só trabalhou.

Em vez de ter cada elemento dizer “Aqui está”, você quer dizer “Item.” Você poderia adicionar um ID para cada elemento e, em seguida, mudar o HTML com o html () ou o texto() função. Mas que parece ser um monte de trabalho. E isso cria um outro problema se o HTML muda em algum lugar ao longo do caminho.

Outra maneira é percorrer cada um dos itens da lista e alterá-las. jQuery tem a sua própria maneira de loop, chamado cada(). o cada() método de ciclo tem uma vantagem sobre o enquanto e para ciclos: A cada() função pode ser usada com jQuery para que você obtenha o máximo partido de todas as funções jQuery e você pode encadear o cada() função com outras funções jQuery.

encadeamento é o termo usado com jQuery para descrever o que você faz quando você se conectar funções com pontos, a fim de fazer a função de aplicar à cadeia.

Com apenas dois elementos para mudar, você provavelmente só fazer isso no próprio HTML, mas este exemplo mostra o processo e funções para mudar HTML para que você possa usá-lo quando você realmente precisa dele.

Video: Manipulación del DOM con jQuery

Este anúncio mostra o HTML e javascript para este exemplo.

adicionando HTML
Aqui está 1
Aqui está 2

O javascript e jQuery aqui mostra algumas coisas novas, assim que olhar um pouco mais de perto o código.

A primeira linha do novo código é a seguinte:

$ ("#theList li") .each (função () {

Essa linha utiliza um seletor para encontrar todos os elementos da ID de a lista. Isso é um pouco diferente do que os outros seletores que você vê e representa como jQuery pode usar a hierarquia da página para acessar somente os itens que você deseja.

o cada() função é alterada no seletor e configura uma função anônima. Neste ponto, você sabe que o código começará ciclo através de cada elemento dentro da ID de a lista.

A próxima linha de código se parece com isso:

. Var existingText = $ (this) .text () substr (7,1) -

Este código estabelece uma variável javascript simples, existingText, e define-o igual ao resultado de $ (This) .text (). Substr (7,1). Mas o que é isso, ou mais apropriadamente, $ (This)? O seletor especial $ (This) refere-se ao elemento atual que está sendo trabalhado. javascript tem um equivalente chamada esta, mas você quer a versão jQuery, para que envolvê-la em sinal de dólar / parênteses notação.

o $ (This) seletor é acorrentado à jQuery texto() função, que recupera o texto elementos, sem marcação HTML, apenas o texto. o texto() função é então preso ao substr () função. o substr () função agarra uma subsequência, ou porção de uma cadeia, e devolve-lo.

Neste caso, você quer substr () para retornar a você um único caractere começando na sétima posição. Você pode fazer isso, porque você sabe que cada elemento começa com a palavra aqui está seguido por um espaço, como este:

Aqui está 1

Contando caracteres a partir da esquerda, há seis personagens Aqui está mais um personagem para o espaço. Isso faz com que sete, então você acaba com substr (7,1). Concedido, esta quebra quando você começa a dez itens, porque você só está retornando um único personagem.

Video: Curso de javascript - 7.05. JQuery. CSS

Você poderia fantasia isso usando uma expressão regular, que você realmente não passou um tempo no entanto, por este exemplo, deixar como está. Ok, se você deve saber, você poderia substituir o substr () com a função partida() funcionar, e ele ficaria assim:

var existingText = $ (this) .text () jogo (/ [d] /). -

De volta à realidade e ao exemplo, a linha final do código parecido com este:

$ (This) .text ("Item " + ExistingText) -

Essa linha simplesmente chama o texto() função, mas ao invés de retornar texto, desta vez você configurá-lo para “Item” + existingText. Porque você tem o número do item na variável existingText, é como se você está anexando-lo.

A página visualizada em um navegador parece com este.