¿Cómo insertar una etiqueta HTML alrededor de la primera letra de una etiqueta específica con JQuery?

Question

No puedo entender esto. ¿Hay alguna manera de insertar una etiqueta HTML alrededor de la primera letra de una etiqueta específica con JQuery?

p. Ej. Tengo esto:

<h1>Heading</h1>

pero necesito esto:

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

Quiero crear una animación CSS en la primera letra de una etiqueta cuando pasa sobre ella.

El CSS h1:hover:first-letter no parece en absoluto compatible. Apuntarlo con el <span> parece ser mi mejor opción. Tristemente insertar el <span> directamente en el HTML no es una opción.

Gracias,

Matt

Answer 1

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

EDIT: por su comentario, romper el código en una función y aplicarlo a cada elemento (También hice la función más dinámica para que pueda envolver el primer personaje en cualquier cosa que quieras).

$('#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

También puede hacerlo a la inversa, envolviendo su <h1> con otro elemento (que se ciernen sobre), entonces el uso de CSS para apuntar la primera letra de la <h1> sí. De esta manera se evita la manipulación de cadenas, y la sustitución de todo el contenido de su cabecera:

JS

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

CSS

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

http://jsfiddle.net/HPYgX/