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

【问题标题】：How to insert a HTML tag around the first letter of a specific tag with JQuery?如何使用 JQuery 在特定标签的第一个字母周围插入 HTML 标签？
【发布时间】：2012-09-05 23:11:47
【问题描述】：

我想不出来这个。有没有办法使用 JQuery 在特定标签的第一个字母周围插入 HTML 标签？

例如我有这个：

<h1>Heading</h1>

但我需要这个：

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

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

h1:hover:first-letter CSS 似乎根本不受支持。使用<span> 定位它似乎是我最好的选择。遗憾的是，不能将<span> 直接插入 HTML。

谢谢，

马特

【问题讨论】：

标签： jquery html hover pseudo-element

【解决方案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));
}

【讨论】：

非常感谢！对于这个项目，我需要针对一组标签，例如#main-nav li 当我在多个标签上使用此代码时，我会遇到一些奇怪的行为，有什么建议吗？谢谢。
再次感谢，我没有得到我想要的结果。我做错什么了吗？ jsfiddle.net/nA8Gw

【解决方案2】：

你也可以反过来做，用另一个元素包裹你的<h1>（悬停在上面），然后使用CSS定位<h1>本身的第一个字母。这样可以避免字符串操作，并替换标题的全部内容：

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

CSS

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

http://jsfiddle.net/HPYgX/

【讨论】：

不错！我没有想过用这样的 CSS 来定位它。它工作得很好。谢谢。