WThere estão algumas maneiras de mudar já 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ê pode 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 é fazer um loop por cada um dos itens da lista e alterá-las. jQuery tem a sua própria maneira de loop, chamado cada(). o cada() método circuito tem uma vantagem sobre o enquanto e para loop: 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 tornar 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 alterar HTML para que você possa usá-lo quando você realmente precisa dele.

Esta lista 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 (function () {

Essa linha usa 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 do 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 define uma variável javascript simples, existingText, e define-a igual ao resultado $ (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 no 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 à substr () função. o substr () função pega uma substring, ou parte de uma cadeia e retorna.

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.

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

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

De volta à realidade e o exemplo, a linha final do código tem esta aparência:

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

Essa linha simplesmente chama o texto() função, mas em vez 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 olha como este.