JQueryで特定のタグの最初の文字の周りにHTMLタグを挿入するには？

Question

私はこれを理解することはできません。 JQueryで特定のタグの最初の文字の周囲にHTMLタグを挿入する方法はありますか？

私はこれがあります。

<h1>Heading</h1>

を私はこれを必要とする：

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

は私がそれにカーソルを合わせると、タグの最初の文字の上にCSSアニメーションを作成したいです。

h1:hover:first-letter CSSはまったくサポートされていないようです。 <span>でターゲット設定するのがベストです悲しいことに、<span>を直接HTMLに挿入することは選択できません。

おかげで、

マット

Answer 1

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

EDIT：あなたのコメントあたり、機能にコードを分割し、各要素に適用します（あなたがラップすることができますので、私はまた、機能がよりダイナミックに作られましたあなたが望むものの中の最初の文字）。

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

また<h1>自体の最初の文字をターゲットにCSSを使用して、その後、別の要素（上にマウスを移動する）を使用して<h1>をラップすることによって、それを他の方法で回避を行うことができます。あなたは文字列操作を回避し、あなたのヘッダの全体の内容を置き換えるこの方法：そんなに

JS

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

CSS

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

http://jsfiddle.net/HPYgX/