Ajouter un saut de ligne après chaque élément est cloné

Question

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

J'ai un tas d'éléments .footnote tout au long de la page, en bas de la page que je veux énumérer toutes les notes de bas de page. Ainsi, chaque note de bas de page sera clonée à #allfootnotes. J'essaie de placer un saut de ligne après chaque .footnote dans l'élément #allfootnotes, donc ils ne sont pas tous mélangés. Comment appliquer le saut de ligne après chaque .footnote une fois qu'il a été cloné à #allfootnotes?

Et est-ce la meilleure façon de le faire? Dans chaque .footnote, il y a deux balises span, une pour le titre, et une pour le contenu de la note de bas de page (ne sait pas si cela compte ou non).

Answer 1

On dirait que vous pouvez utiliser les CSS pour faire

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

En fonction de votre situation, vous devrez peut-être faire .footnote un élément de niveau bloc avec display: block;

Answer 2

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

EDIT S'il vous plaît voir la réponse de Roxon. C'est bien plus propre que d'itérer sur des notes de bas de page.

Answer 3

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

S'il y a autant notes de pied comme vous dites cache votre $('#allfootnotes') va diminuer la charge sur le navigateur.

Hope this helps

Answer 4

DEMO

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

Si vous utilisez XHTML qu'il devrait être <br />