Добавьте разрыв строки после клонирования каждого элемента

Question

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

У меня есть куча .footnote элементов по всей странице, в нижней части страницы я хочу перечислить все сноски на странице.Таким образом, каждая сноска будет клонирована в #allfootnotes.Я пытаюсь поместить разрыв строки после каждого .footnote в элементе #allfootnotes, поэтому они не все перемешаны друг с другом.

Как мне применить разрыв строки после каждого .footnote, как только этобыл клонирован на #allfootnotes?

И это лучший способ сделать это?В каждом .footnote есть 2 тега span, один для заголовка и один для содержания сноски (не знаю, имеет ли это значение).

Answer 1

Похоже, вы могли бы использовать CSS, чтобы сделать это

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

В зависимости от вашей ситуации вам может понадобиться сделать .footnote элементом уровня блока с помощью display: block;

Answer 2

DEMO

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

Если вы используете XHTML, то это должно быть <br />

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. Это намного чище, чем перебирать сноски самостоятельно.