5

私はこれを理解することはできません。JQueryで特定のタグの最初の文字の周りにHTMLタグを挿入する方法はありますか？

例：私はこれを持っています：

<h1>Heading</h1>

しかし、私はこれが必要です：

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

タグにカーソルを合わせたときに、タグの最初の文字にCSSアニメーションを作成したいと思います。

CSSはh1:hover:first-letterまったくサポートされていないようです。それをターゲットにするの<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 に答える