3

javascriptを使用して、次のようにH3要素をループしています。

$('h3').each(function(){ });

次に、次のようにフォーマットされたタグのアンカーを生成します。「section-x」ここで、xはページ上のH3ごとに増分します。私が抱えている問題は、ヘッダーの最初の文字を次のようにアンカーリンクにしたいということです。

* H *eading

..ここで、Hには下線が引かれ、リンクを表します。アンカーをフォーマットすることはできますが、各見出しの最初の文字をハイパーリンクタグで囲む方法がわかりません。いくつかの助けをいただければ幸いです。

よろしく、kvanberendonck

4

3 に答える 3

5

このようなもの？

$('h3').each(function(){ 
    var currentHeading = $(this).text();

    $(this).html("<a href='link'>" + currentHeading.substr(0,1) + "</a>" + currentHeading.substr(1, currentHeading.length - 1));
});
于 2012-04-05T03:16:27.477 に答える
2

プレーンなJavaScriptをミックスに入れましょう：

$('h3').html(function(i){
    var self = $(this)
      , html = self.html()

    return html[0].anchor('section-'+i) + html.substring(1)
})
  • html（および他のほとんどのセッター関数）は、引数として関数を受け入れ、各要素の戻り値を使用します
  • "string".link(target)コードを作成します<a href="#target">string</a>。素敵なヴィンテージの便利な方法

編集：.linkからに切り替えました.anchor。ただし、アンカーは非推奨です。そのためにIDの使用を開始する必要があります。

$('h3').html(function(i){
    var self = $(this)
      , text = self.text()

    // give the H3 an id and link to it
    // ideally the headers should already have an id
    this.id = 'section-'+i
    return text[0].link('#section-'+i) + text.substring(1)
})
于 2012-04-05T03:30:06.807 に答える
1 
$('h3').each(function(i){
   var firstLetter = $(this).text()[0];
   $(this).html('<a href="where.html">' + firstLetter + '</a>' + $(this).text().substr(1));
});

section-xその見出しをどこに配置するかはわかりませんが、そのi中を使用each()して現在の反復インデックスを取得できます。

于 2012-04-05T03:24:51.800 に答える