jquery - jQuery中的foreach

Question

我正在尝试根据特定 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>

Answer 1

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());
});

Answer 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));
});

Answer 3

首先我会确保它只适用于你想要的 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()}));
    });
});