5

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

例如我有这个：

<h1>Heading</h1>

但我需要这个：

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

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

h1:hover:first-letter似乎根本不支持 CSS 。<span>用似乎是我最好的选择来定位它。可悲的是，将其<span>直接插入 HTML 不是一种选择。

谢谢，

马特

4

2 回答 2

5 
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));
}
于 2012-09-05T23:16:53.337 回答
3

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

JS

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

CSS

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

http://jsfiddle.net/HPYgX/

于 2012-09-05T23:21:11.960 回答