Dada una declaración y la tarea es subrayar todas las palabras de texto de la página HTML usando jQuery. Usaremos la propiedad de decoración de texto para agregar subrayado a cada palabra.
Código HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p span {
text-decoration: underline;
}
</style>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to underline all the words
of a text using jQuery?
</h2>
<p>
Geeks For Geeks. A computer
science portal for Geeks.
</p>
</body>
</html>
Código jQuery:
$('p').each(function () {
var text_words = $(this).text().split(' ');
$(this).empty().html(function () {
for (i = 0; i < text_words.length; i++) {
if (i === 0) {
$(this).append('<span>'
+ text_words[i] + '</span>');
} else {
$(this).append(' <span>'
+ text_words[i] + '</span>');
}
}
});
});
Código final: el siguiente código es la combinación de los dos fragmentos de código anteriores.
<!DOCTYPE html>
<html>
<head>
<style>
p span {
text-decoration: underline;
}
</style>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to underline all the words
of a text using jQuery?
</h2>
<p>
Geeks For Geeks. A computer
science portal for Geeks.
</p>
<script>
$(document).ready(function () {
$('p').each(function () {
var text_words =
$(this).text().split(' ');
$(this).empty().html(function () {
for (i = 0; i < text_words.length; i++) {
if (i === 0) {
$(this).append('<span>'
+ text_words[i] + '</span>');
}
else {
$(this).append(' <span>'
+ text_words[i] + '</span>');
}
}
});
});
});
</script>
</body>
</html>
Producción:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA