JQuery ile belirli bir etiketin ilk harfine HTML etiketi nasıl eklenir?

Question

Bunu anlayamıyorum. JQuery ile belirli bir etiketin ilk harfinin etrafına bir HTML etiketi yerleştirmenin bir yolu var mı?

örn. Bunu alabilir:

<h1>Heading</h1>

ama bu gerekir:

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

Ben bunun üzerine geldiğinizde bir etiketin ilk harfine bir CSS animasyon oluşturmak istiyorum.

h1:hover:first-letter CSS desteklenmemektedir. <span> ile hedeflemek en iyi seçeneğim gibi görünüyor. Ne yazık ki <span>'u doğrudan HTML'ye eklemek bir seçenek değildir.

sayesinde

Matt

Answer 1

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

DÜZENLEME: Yorumlarınız başına, bir fonksiyonun içine kodunu kırmak ve tamamlamayı böylece daha dinamik (Ben de işlevini yapılan her elemana uygulamak İstediğiniz herhangi bir şeydeki ilk karakter.

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

Ayrıca, başka bir elemanın (üzerine gelerek) ile sizin <h1> sararak, çevresinde başka bir yol yapabilir ve ardından CSS kullanarak <h1> kendisinin ilk harfini hedef. Bu dize kullanımı önlemek yolu ve Başlığınızın bütün içeriğini değiştirerek:

JS

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

çok CSS

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

http://jsfiddle.net/HPYgX/