Temas > Programacion > Java script - Java > Iteracion por los elementos each en jQuery
Julio

Iteración por los elementos (each)
jQuery dispone de un método que nos permite asociar 
una función que se ejecutará por cada elemento que contenga 
la lista del objeto jQuery.
Dentro de esta función podemos manipular el elemento actual.
La sintaxis del iterador each es:
<?php //esto no va
  var x;
  x=$([elementos]);
  x.each([nombre de funcion])
?>//esto no va
Resaltar con fondo amarillo todos los párrafos que tienen 
menos de 100 caracteres.
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <div id="parrafos">
 <p>párrafo 1 - párrafo 1 - párrafo 1 - párrafo
 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 -
 párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
 1 - párrafo 1 - párrafo 1 - párrafo 1 -
 párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
 1 - párrafo 1 - párrafo 1 - párrafo 1 -
 párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
 1 - párrafo 1 - párrafo 1 - párrafo 1</p>
 <p>párrafo 2 - párrafo 2 - párrafo 2 - párrafo 2</p>
 <p>párrafo 3 - párrafo 3 - párrafo 3 - párrafo
 3 - párrafo 3 - párrafo 3 - párrafo 3 -
 párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo
 3 - párrafo 3 - párrafo 3 -
 párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo
 3 - párrafo 3 - párrafo 3 - párrafo 3 -
 párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo
 3 - párrafo 3</p>
 <p>párrafo 4 - párrafo 4 - párrafo 4 - párrafo
 4 - párrafo 4</p>
 </div>
 </body>
 </html>
?>//esto no va
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
    var x;
    x=$("#parrafos p");
    x.each(resaltarParrafos);
 }
 function resaltarParrafos()
 {
    var x=$(this);
    if (x.text().length<100)
    {
       x.css("background-color","#ff0");
    }
 }
?>//esto no va
En la función inicializarEventos obtenemos la lista de 
párrafos contenidas en el div y luego a este objeto jQuery 
mediante el método each indicamos el nombre de la
función que procesará a cada elemento:
<?php //esto no va
   x=$("#parrafos p");
   x.each(resaltarParrafos);
?>//esto no va
La función resaltarParrafos se ejecuta por cada uno de 
los párrafos contenidos en el objeto jQuery (en nuestro caso 
4 párrafos):
<?php //esto no va
function resaltarParrafos()
{
   var x=$(this);
   if (x.text().length<100)
   {
      x.css("background-color","#ff0");
   }
}
?>//esto no va
Lo primero que hacemos mediante la función $ y pasando 
this como parámetro obtenemos la referencia del párrafo a 
procesar. Accedemos al método text() que nos
retorna el texto del párrafo propiamente dicho.
El método text() retorna un string por lo que podemos acceder 
al atributo length y verificar la cantidad de caracteres que tiene, 
en caso de ser inferior a 100 procedemos a cambiar el color de 
fondo de dicho párrafo.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar