jQuery si rivela molto utile anche nella manipolazione del testo. Per esempio possiamo evidenziare con una sottolineatura tutte le parole presenti in un blocco di testo. Vediamo come fare.
Data questa marcatura:
<h1>Lorem ipsum dolor sit amet</h1>
<h1>Et ideo autem ipsum dolor sit amet</h1>
Possiamo usare il seguente codice jQuery:
$(function() {
$('h1').each(function() {
var words = $(this).text().split(' ');
$(this).empty().html(function() {
for (i = 0; i < words.length; i++) {
if (i == 0) {
$(this).append('<span>' + words[i] + '</span>');
} else {
$(this).append(' <span>' + words[i] + '</span>');
}
}
});
});
});
La nostra routine divide il nodo di testo in tanti parole e riassembla il contenuto HTML con elementi span utilizzando il metodo JavaScript split(). Possiamo quindi usare il seguente codice CSS:
h1 span {
text-decoration: underline;
}
Potete visionare l'esempio finale in questa pagina.