Come inserire un tag HTML attorno alla prima lettera di un tag specifico con JQuery?

Question

Non riesco a capirlo. C'è un modo per inserire un tag HTML attorno alla prima lettera di un tag specifico con JQuery?

ad es. Ho questo:

<h1>Heading</h1>

, ma ho bisogno di questo:

<h1><span>H</span>eading</h1>

voglio creare un'animazione CSS sulla prima lettera di un tag quando mi passa il mouse su di esso.

Il CSS h1:hover:first-letter non sembra supportato. Targeting con il <span> sembra la mia migliore opzione. Inserire tristemente lo <span> direttamente nell'HTML non è un'opzione.

Grazie,

Matt

Answer 1

var t = $('h1').text(); 
$('h1').html('<span>'+t.substring(0,1)+'</span>'+t.substring(1)); 

EDIT: per il tuo commento, rompere il codice in una funzione e applicarlo ad ogni elemento (ho fatto anche la funzione più dinamica in modo da poter avvolgere il primo personaggio in tutto ciò che vuoi).

$('#main-nav li').each(function() { 
    wrap_first_character(this, $('<span>')); 
}); 

function wrap_first_character(ele, tag) { 
    var t = $(ele).text(); 
    $(ele).append(tag.html(t.substring(0,1))).append(t.substring(1)); 
} 

Answer 2

si può anche fare il contrario intorno, avvolgendo il <h1> con un altro elemento (ad aleggiare su), quindi utilizzando i CSS per indirizzare la prima lettera del <h1> stesso. In questo modo si evita la manipolazione di stringhe, e sostituendo l'intero contenuto della vostra intestazione:

JS

$('h1').wrap('<div>');​ 

CSS

div:hover h1:first-letter { color: red; }​ 

http://jsfiddle.net/HPYgX/