1

特定のh2のコンテンツに基づいて、各h2にタグを追加しようとしています。これが私が試したことです：

jQuery(document).ready(function() {
    jQuery( "h2" ).each(function(){
        var $headingcontent = jQuery('h2').html().toLowerCase();
        jQuery('h2').prepend('<a id="'+ $headingcontent +'"></a>');
    });
});

ただし、これは最初の h2 のコンテンツのみを取得し、それをすべての h2 の先頭に追加するように見えます。ページに h2 がいくつあるかに応じて、これを複数回行います。

私がやりたいことは、これを変えることです:

<h2>Heading 1</h2>
<h2>Heading 2</h2>

の中へ

<h2><a id="heading 1"></a>Heading 1</h2>
<h2><a id="heading 2"></a>Heading 2</h2>
4

3 に答える 3

6 
jQuery( "h2" ).each(function(){
    var $headingcontent = jQuery(this).html().toLowerCase();
    jQuery(this).prepend('<a id="'+ $headingcontent +'"></a>');
});

aところで、追加の要素はまったく必要ありません。

jQuery( "h2" ).each(function(){
    var $this = jQuery(this);
    $this.attr('id', $this.html().toLowerCase());
});
于 2013-07-05T22:58:08.000 に答える
2

代わりに、アンカーをH2要素内にネストします。

$( "h2" ).each(function(_,el){//Get each element as el and _ as index
    el = $(el); // Cache for performance
    var $headingcontent = el.text().toLowerCase();//Get the text
    //Replace h2 content with the an anchor element with same content;
    el.html('<a id="'+ encodeURIComponent($headingcontent) +'">' 
    + $headingcontent
    + '</a>');
});

もちろん、 I\anchor 要素はまったく必要ありません

$( "h2" ).each(function(_,el){//Get each element as el and _ as index
    el = $(el); // Cache for performance
    var $headingcontent = el.text().toLowerCase();/Get the text
   //Add id to element for navigational purposes.
    el.prop('id', encodeURIComponent($headingcontent));
});
于 2013-07-05T23:06:09.610 に答える
0

最初に、意図したH2にのみ適用されることを確認します。後で、あなた/他の誰かがh2を別の場所に追加して、予期しない結果が得られる可能性があります...

<h2 class='content'>Heading 1</h2>
<h2 class='content'>Heading 2</h2>

コード：

jQuery(document).ready(function() {
    jQuery('h2.content').each(function(){
var target = $(this);
        jQuery(target).append($('<a/>',{'id':$(target).text(),text:$(target).text()}));
    });
});
于 2013-07-05T23:15:29.937 に答える