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

  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

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#parrafos p");
  x.each(resaltarParrafos);
}

function resaltarParrafos() {
  let 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:

  let 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() {
  let x = $(this);
  if (x.text().length < 100) {
    x.css("background-color", "#ff0");
  }
}

Lo primero que hacemos mediante la función $ es obtener la referencia del objeto 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.


Retornar