<p> y un js que lea estas etiquetas. El js resaltará de amarillo aquellos párrafos cuyo contenido sea mayor de 100 caracteres.La función
$.each() no es lo mismo que $(selector).each(), que se usa para iterar, exclusivamente, sobre un objeto jQuery.Versión 1
https://repl.it/@valoro/jQuery-parrafos-cien1
HTML
Disponemos de unos versos agrupados en párrafos donde unos tienen una longitud mayor a 100 caracteres y otros no. El objetivo es subrayar de color amarillo los párrafos largos al pulsar un botón. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery resaltar textos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Resaltar textos largos</h1>
<h3>Si el párrafo tiene más de cien caracteres</h3>
<h5>Poderoso caballero es Don Dinero (<i>Quevedo</i>)</h5>
<p>Nace en las Indias honrado, donde el mundo le acompaña; viene a morir en España, y es en Génova enterrado.</p>
<p>Y pues quien le trae al lado es hermoso, aunque sea fiero, poderoso caballero es don Dinero.</p>
<p>Es galán y es como un oro, tiene quebrado el color, persona de gran valor, tan cristiano como moro.</p>
<p>Pues que da y quita el decoro y quebranta cualquier fuero, poderoso caballero es don Dinero.</p>
<p>Son sus padres principales, y es de noble descendiente, porque en las venas de Oriente todas las sangres son reales;</p>
<p>y pues es quien hace iguales al duque y al ganadero, poderoso caballero es don Dinero.</p>
<p>Mas ¿a quién no maravilla ver en su gloria sin tasa que es lo menos de su casa doña Blanca de Castilla?</p>
<p>Pero, pues da al bajo silla y al cobarde hace guerrero, poderoso caballero es don Dinero.</p>
<p>Sus escudos de armas nobles son siempre tan principales, que sin sus escudos reales no hay escudos de armas dobles;</p>
<p>y pues a los mismos robles da codicia su minero, poderoso caballero es don Dinero.</p>
<p>Por importar en los tratos y dar tan buenos consejos, en las casas de los viejos gatos le guardan de gatos.</p>
<p>Y pues él rompe recatos y ablanda al juez más severo, poderoso caballero es don Dinero.</p>
<p>Y es tanta su majestad (aunque son sus duelos hartos), que con haberle hecho cuartos, no pierde su autoridad;</p>
<p>pero, pues da calidad al noble y al pordiosero, poderoso caballero es don Dinero.</p>
<p>Nunca vi damas ingratas a su gusto y afición; que a las caras de un doblón hacen sus caras baratas;</p>
<p>y pues hace las bravatas desde una bolsa de cuero, poderoso caballero es don Dinero.</p>
<p>Más valen en cualquier tierra (¡mirad si es harto sagaz!) sus escudos en la paz que rodelas en la guerra.</p>
<p>Y pues al pobre le entierra y hace propio al forastero, poderoso caballero es don Dinero.</p>
<input type="button" id="boton" value="Párrafos largos">
</body>
</html>
JavaScript + jQuery
La funcióneach de jQuery es una función iteradora genérica, que se puede usar para iterar sin problemas sobre objetos y matrices.Por consola vamos mostrando los HTMLParagraphElement, y luego hemos ido viendo cómo podemos acceder a sus elementos para obtener la longitud del texto.
'use strict'
$(function(){
$("#boton").click( function() {
var ps=$('p');
console.log(ps);
console.log("Longitud del 1er párrafo: "+ps.eq(0).html().length);
$.each(ps, function(i,valor){
console.log(i+": "+valor.firstChild.length);
var largo=valor.firstChild.length;
if(largo>100){
valor.style.backgroundColor='yellow';
}
});
});
});
La versión 1 logra el objetivo pero veamos que existen formas alternativas de conseguirlo.
En las demás versiones que veremos el código HTML es el mismo que el visto en la versión 1.
Versión 2
https://repl.it/@valoro/jQuery-parrafos-cien2JavaScript + jQuery
'use strict'
$(function(){
$("#boton").click(estiloParrafos);
function estiloParrafos(){
$("p").each(estiloP);
}
function estiloP(){
if((this.textContent.length) > 100) {
$(this).css("background-color", "yellow");
}
}
});
Versión 3
https://repl.it/@valoro/jQuery-parrafos-cien3JavaScript + jQuery
'use strict'
$(function(){
$("#boton").click(function(){
$("p").each(estiloP);
function estiloP(){
if((this.textContent.length) > 100) {
$(this).css("background-color", "yellow");
};
}
});
});
Versión 4
https://repl.it/@valoro/jQuery-parrafos-cien4JavaScript + jQuery
'use strict'
$(function(){
$("#boton").click(function(){
$("p").each(function(i,v){ //podemos sustituir v por this
if((v.textContent.length) > 100) {
$(v).css("background-color", "yellow");
};
});
});
});
Versión 5
https://repl.it/@valoro/jQuery-parrafos-cien5JavaScript + jQuery
'use strict'
$(function(){
$("#boton").click(function(){
$.each($("p"),function(i,v){
if((v.textContent.length)>100){
$(v).css("background-color","yellow");
};
});
});
});
Versión 6
https://repl.it/@valoro/jQuery-parrafos-cien6JavaScript + jQuery
'use strict'
$(function(){
$("#boton").click(function(){
$.each($("p"),function(){
if((this.textContent.length)>100){
$(this).css("background-color","yellow");
};
});
});
});
Versión 7
En esta versión realizamos un bucle tradicionalfor.En el condicional podemos utilizar la siguiente expresión alternativa.
if (p[i].innerText.length>100){https://repl.it/@valoro/jQuery-parrafos-cien7
JavaScript + jQuery
'use strict'
$(function(){
console.log($("p").text().length);
console.log($("p"));
$("#boton").click(function(){
var p = $("p");
for (var i=0;i<p.length;i++){
if (p[i].textContent.length>100){
$(p[i]).css("background-color","yellow");
};
};
});
});
Versión 8
https://repl.it/@valoro/jQuery-parrafos-cien8
JavaScript + jQuery
'use strict'
$(function(){
$("#boton").click(function(){
$("p").each(function(){
console.log($(this).text().length);
if ($(this).text().length>100) {
$(this).css("background-color", "yellow");
};
});
});
});
No hay comentarios:
Publicar un comentario