如何使用JQuery在特定标记的第一个字母周围插入HTML标记？

我搞不懂这个。有没有办法用JQuery在特定标记的第一个字母周围插入HTML标记

e、 g.我有：

标题

但我需要这个：

标题

当我将鼠标悬停在标签上时，我想在标签的第一个字母上创建一个CSS动画

h1:hover:first-letter

CSS似乎根本不受支持。用

瞄准它似乎是我最好的选择。遗憾的是，将

直接插入HTML不是一个选项

谢谢

Matt

var t=$（'h1'）.text（）；
$（'h1'）.html（''+t.substring（0,1）+''+t.substring（1））；

编辑：根据您的注释，将代码分解为一个函数，并将其应用于每个元素（我还使函数更具动态性，以便您可以将第一个字符包装成任何您想要的内容）

$（'#主导航li'）。每个（函数（）{
换行第一个字符（这个，$（''）；
});
函数换行第一个字符（元素、标记）{
var t=$（ele.text（）；
$（ele）.append（tag.html（t.substring（0,1）））.append（t.substring（1））；
}

您也可以通过另一种方式来实现，方法是使用另一个元素（悬停在上方）包装

，然后使用CSS将

本身的第一个字母作为目标。这样可以避免字符串操作，并替换标题的全部内容：

JS

---

非常感谢！对于这个项目，我需要针对一组标签，例如

#main nav li

当我在多个标签上使用此代码时，我会发现一些奇怪的行为，有什么建议吗？谢谢，再次谢谢，我没有得到我想要的结果。我做错什么了吗？美好的我没有想过要用CSS来定位它。它工作得很好。谢谢

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));
}

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

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