24 - Iteración por los elementos (each)
Simulador
(Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.
)
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"); } }
Retornar