Conceptos de JQuery

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:

  var x;
  x=$([elementos]);
  x.each([nombre de funcion])

Problema:Resaltar con fondo amarillo todos los párrafos que tienen menos de 100 caracteres.

pagina1.html

<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>

funciones.js

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");
  }
}

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:

  x=$("#parrafos p");
  x.each(resaltarParrafos);

La función resaltarParrafos se ejecuta por cada uno de los párrafos contenidos en el objeto jQuery (en nuestro caso 4 párrafos):

function resaltarParrafos()
{
  var x=$(this);
  if (x.text().length<100)
  {
    x.css("background-color","#ff0");
  }
}

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.

24 - Iteración por los elementos (each)

Retornar