克隆每个元素后添加换行符

Question

$('.footnote').clone().appendTo('#allfootnotes').append('<br>');

我在整个页面中有一堆 .footnote 元素，在页面底部我想列出页面上的所有脚注。因此每个脚注都会被克隆到#allfootnotes。我试图在 #allfootnotes 元素中的每个 .footnote 之后放置一个换行符，这样它们就不会混在一起。

一旦将每个 .footnote 克隆到 #allfootnotes 后，如何在每个 .footnote 之后应用换行符？

这是最好的方法吗？在每个 .footnote 中有 2 个 span 标签，一个用于标题，一个用于脚注内容（不知道这是否重要）。

Answer 1

听起来您可以使用 CSS 来执行此操作，

#allfootnotes .footnote {
  margin-bottom: 10px;      
}

具体取决于您的情况，您可能需要使用 display: block; 将 .footnote 设为块级元素

Answer 2

DEMO

$('.footnote').clone().appendTo('#allfootnotes').after('<br>');

如果您使用 XHTML，则应该是 <代码>

Answer 3

var allFootNotes = $('#allfootnotes');
$('.footnote').each(function(){
     $(this).clone().add('<br/>').appendTo(allFootNotes);
});

如果有如您所说的那么多脚注，缓存 $('#allfootnotes') 将减少浏览器的负载。

希望这有帮助

Answer 4

$('.footnote').each(function() {
    $(this).clone().add('<br/>').appendTo('#allfootnotes');
});

编辑请参阅 roXon 的答案。这比自己迭代脚注要干净得多。