Question

我遇到了以下问题。我用脚注解释了一些内容。脚注例如 [10] 的格式为[10]。 screenshot of content with footnotes

我尝试使用以下jQuery将[10]替换为<a href="#m10" data-toggle="modal">[10]</a>：

<script type='text/javascript'>
$(window).on('load', function() {
    $(function(){
        var s = $('sup').html().slice(1, -1);
        $("sup").replaceWith('<a href="#m'+s+'" data-toggle="modal"><sup>['+s+']</sup></a>');
    });
}); 
</script>

不幸的是，这段代码用相同/ FIRST找到的脚注替换了所有脚注 - 在这种情况下，所有脚注都替换为＆＃34; 10＆＃34; （见截图）。我想以递归方式替换每个脚注。

我不知道如何解决这个问题已经困了好几天了。也许你们这些人或女孩都可以帮助我。非常感谢提前。

Answer 1

$('sup').each(function () {
  $(this).wrap('<a href="#m' + $(this).html().slice(1, -1) + '" data-toggle="modal"></a>');
});

查看.each()方法。问题是您的代码只运行一次，而不是在每次出现

的上下文中运行

Answer 2

迭代每个sup元素并替换相应的HTML，而不是替换所有 sup元素。在.each()方法的内部，this引用了当前的sup元素。

根据您提供的jQuery，您可能需要：

$('sup').each(function() {
  var s = this.textContent.slice(1, -1);

  $(this).replaceWith('<a href="#m' + s + '" data-toggle="modal"><sup>[' + s + ']</sup></a>');
});

您可以使用.slice()方法提取数字，而不是使用.match()：

$('sup').each(function() {
  var s = this.textContent.match(/\d+/)[0];

  $(this).replaceWith('<a href="#m' + s + '" data-toggle="modal"><sup>[' + s + ']</sup></a>');
});

Answer 3

您需要使用迭代器。试试以下

$('sup').each(function(){
var s = $(this).html().slice(1, -1);
    $(this).wrap('<a href="#m'+s+'" data-toggle="modal"></a>');

});

参考文献 - wrap和each

jquery，递归替换多个元素

3 个答案: