WThere son algunas maneras de cambiar ya elementos HTML existentes con jQuery, dependiendo de lo que desee cambiar. Por ejemplo, digamos que usted quiere cambiar el texto de los elementos de la página que acaba de trabajar en.

En lugar de tener cada elemento decir "Esto es," usted quiere que diga "Punto". Se podría añadir un identificador a cada elemento y cambie el HTML con el html () o el de texto () función. Pero eso parece como un montón de trabajo. Y crea otro problema si el HTML cambia algún lugar del camino.

Otra forma es colocar a través de cada uno de los elementos de la lista y cambiarlos. jQuery tiene su propia forma de bucle, llamado each (). los each () método de bucle tiene una ventaja sobre el mientras y para bucles: La each () función se puede utilizar con jQuery para que pueda obtener la ventaja completa de todas las funciones de jQuery y se puede encadenar la each () función con otras funciones de jQuery.

Encadenar es el término que se utiliza con jQuery para describir lo que se hace cuando se conecta funciones con puntos con el fin de hacer que la función se aplica a la cadena.

Con sólo dos elementos para cambiar, lo que probablemente acaba de hacer esto en el propio HTML, pero este ejemplo muestra el proceso y las funciones para el cambio de HTML para que pueda utilizarlo cuando realmente lo necesita.

Este listado muestra el código HTML y javascript para este ejemplo.

Adición de HTML
Así es 1
Así es 2

El javascript y jQuery aquí muestra un par de cosas nuevas, así que busca un poco más de cerca el código.

La primera línea del nuevo código es el siguiente:

$ ("# theList li"). each (function () {

Esa línea utiliza un selector para encontrar todos

elementos dentro de la ID de la lista. Eso es un poco diferente a los otros selectores que usted ve y representa cómo jQuery puede utilizar la jerarquía de la página para acceder sólo a los elementos que desea.

los each () la función se cambia en el selector y establece una función anónima. En este punto, usted sabe que el código se iniciará un bucle a través de cada

elemento dentro del ID de la lista.

La siguiente línea de código es el siguiente:

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

Este código establece una variable normal javascript, existingText, y lo establece igual al resultado de $ (this) .text (). substr (7,1). Pero, ¿qué es esto, o más apropiadamente, $ (this)? El selector especial $ (this) se refiere al elemento actual se está trabajando. javascript tiene un equivalente llamado esta, pero desea que la versión de jQuery, por lo que se coloca en el signo de dólar / paréntesis notación.

los $ (this) selector está encadenado a la jQuery de texto () función, que recupera el texto elementos, sin formato HTML, sólo el texto. los de texto () función es entonces encadenado a la substr () función. los substr () función agarra una subcadena, o parte de una cadena, y lo devuelve.

En este caso, desea substr () para volver a usted un solo personaje que comienza en la séptima posición. Usted puede hacer esto porque usted sabe que cada elemento comienza con la palabra Aquí seguido de un espacio, de esta manera:

Así es 1

Contar caracteres de la izquierda, hay seis personajes en Aquí está más un carácter para el espacio. Eso hace siete años, por lo que terminan con substr (7,1). Por supuesto, esto rompe al llegar a diez puntos, porque sólo estás devolviendo un solo carácter.

Usted podría apetece esto mediante el uso de una expresión regular, que realmente no ha pasado tiempo en todavía, así que para este ejemplo, dejarlo como está. Bueno, si quieres saberlo, podría reemplazar el substr () función con el partido() funcionar, y se vería así:

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

Volver a la realidad y el ejemplo, la última línea de código es el siguiente:

$ (this) .text ("elemento" + existingText) -

Esa línea, simplemente llama al de texto () función, pero en lugar de devolver el texto, esta vez se puso a "Artículo" + existingText. Debido a que usted tiene el número del elemento en la variable existingText, es como que estás añadiendo ella.

Una página en un navegador se parece a éste.