jQuery中的Foreach

我试图根据特定h2的内容为每个h2预先添加一个标记。以下是我尝试过的：

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

jQuery（文档）.ready（函数（）{
jQuery（“h2”）。每个（函数（）{
var$headingcontent=jQuery（'h2'）.html（）.toLowerCase（）；
jQuery（'h2'）。前缀（''；
});
});

然而，这似乎只获取第一个h2的内容，并将其前置到每个h2，它会根据页面上的h2数量多次执行此操作

我希望它能做到的是：

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

标题1
标题2

进入

标题1
标题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>');
});

---

我将把锚嵌套在

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

---

首先，我要确保它只适用于您想要的H2，接下来您/其他人可能会在其他地方添加H2，并获得意外的结果

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

标题1
标题2

代码：

jQuery（文档）.ready（函数（）{
jQuery（'h2.content'）。每个（函数（）{
var目标=$（此）；
jQuery（target）.append（$（''，{'id'：$（target.text（），text:$（target.text（）））；
});
});

首先，我要确保它只适用于您想要的H2，接下来您/其他人可能会在其他地方添加H2，并获得意外的结果

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

标题1
标题2

代码：

jQuery（文档）.ready（函数（）{
jQuery（'h2.content'）。每个（函数（）{
var目标=$（此）；
jQuery（target）.append（$（''，{'id'：$（target.text（），text:$（target.text（）））；
});
});

为什么这是个坏主意？可能慢？@user319940:不，可能很奇怪。解释你为什么需要它，它被用来让客户端更容易在页面内导航，这样他们只需添加指向#某物的链接，就可以热链接到页面中的部分，而不必自己添加锚。那么可能没那么奇怪：-）@raam8:yep，一些w3m用户可能对这种实现不满意这是个什么坏主意？可能慢？@user319940:不，可能很奇怪。解释你为什么需要它，它被用来让客户端更容易在页面内导航，这样他们只需添加指向#某物的链接，就可以热链接到页面中的部分，而不必自己添加锚。那么可能没那么奇怪：-）@raam8:yep，一些w3m用户可能对这种实现不满意。您确定您不是想

.wrapInner（）

而不是

.prepend（）

？另外，您可能应该从文本中删除空格和其他字符…不，我特别希望添加一个空标记-它只是用于导航目的：）。请注意，空格在DOM元素ID中是不合法的。谢谢您-我想我可以使用替换来添加一些破折号？您确定您不是有意

.wrapInner（）

而不是

.prepend（）

？另外，您可能应该删除文本中的空格和其他字符…不，我特别希望添加一个空标记-它只是用于导航目的：）。请注意，空格在DOM元素ID中是不合法的。谢谢-我想我可以使用替换来添加一些破折号？谢谢，这看起来是一个很好的答案，但实际上我不想把标题设计成链接。这些锚点只是为了导航目的而存在：）。您可以将它们设置为专用链接，甚至只是不同的悬停颜色。它为用户提供感官输入。但这不会链接到任何地方，这是浏览器在单击另一个链接时跳过的点。我认为允许人们点击它会是一种糟糕的用户体验，因为它实际上不会导致任何结果。@user319940您可以简单地将id添加到H2中，然后像#$headingcontent一样导航到H2中。谢谢，这看起来是一个很好的答案，但实际上我不希望标题被设置为链接。这些锚点只是为了导航目的而存在：）。您可以将它们设置为专用链接，甚至只是不同的悬停颜色。它为用户提供感官输入。但这不会链接到任何地方，这是浏览器在单击另一个链接时跳过的点。我认为如果允许人们点击它，那将是一种糟糕的用户体验，因为它实际上不会导致任何结果。@user319940您可以简单地将id添加到H2中，然后像#$headingcontent一样在那里导航

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

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