JQuery के साथ एक विशिष्ट टैग के पहले अक्षर के आस-पास एक HTML टैग कैसे डालें?

Question

मैं इसे एक नहीं समझ सकता। JQuery के साथ एक विशिष्ट टैग के पहले अक्षर के आसपास एक HTML टैग डालने का कोई तरीका है?

उदा। मैं इस है:

<h1>Heading</h1>

लेकिन मैं इस की जरूरत है:

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

मैं जब मैं उस पर होवर एक टैग के पहले अक्षर पर एक सीएसएस एनीमेशन बनाना चाहते हैं।

h1:hover:first-letter सीएसएस सभी समर्थित नहीं लगता है। इसे <span> के साथ लक्षित करना मेरा सबसे अच्छा विकल्प लगता है। दुर्भाग्य से HTML में <span> डालने का विकल्प एक विकल्प नहीं है।

धन्यवाद,

मैट

Answer 1

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

संपादित करें: अपनी टिप्पणी प्रति, एक समारोह में कोड तोड़ने के लिए और (मैं भी समारोह बना दिया और अधिक गतिशील प्रत्येक तत्व में इसे लागू कर सकते हैं ताकि आप लपेट आप चाहते हैं कि कुछ भी पहला चरित्र)।

$('#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> लपेटकर, तो सीएसएस का उपयोग कर <h1> खुद के पहले अक्षर को लक्षित करने के लिए। इस तरह से आप स्ट्रिंग परिवर्तन से बचने के लिए, और अपने हैडर के पूरे सामग्री की जगह:

जे एस

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

सीएसएस

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

http://jsfiddle.net/HPYgX/