Как добавить несколько идентичных элементов в div с помощью jQuery

Мне нужно добавить несколько пустых div в элемент контейнера, используя jQuery.

В настоящий момент я создаю строку, содержащую пустой html, используя цикл

divstr = '<div></div><div></div>...<div></div>';

а затем введя его в мой контейнер:

$('#container').html(divstr);

Есть ли более элегантный способ вставки нескольких одинаковых элементов?

Я надеюсь найти что-то, что не сломает цепочку, но не заставит браузер встать на колени. Цепочный плагин .repeat()?

Ответы

Ответ 1

Если вы хотите, чтобы IE был быстрым - или, как правило, считал скорость, вам нужно сначала создать фрагмент DOM, прежде чем вставлять его.

Джон Ресиг объясняет эту технику и включает в себя тест производительности:

http://ejohn.org/blog/dom-documentfragments/

var i = 10, 
    fragment = document.createDocumentFragment(), 
    div = document.createElement('div');

while (i--) {
    fragment.appendChild(div.cloneNode(true));
}

$('#container').append(fragment);

Я понимаю, что это не очень полезно использовать jQuery для создания фрагмента, но я провел несколько тестов, и я не могу сделать $(фрагмент).append() - но я прочитал В выпуске John jQuery 1.3 предполагается включить изменения, основанные на результатах исследований, связанных выше.

Ответ 2

Самый быстрый способ сделать это - сначала создать контент со строками. МНОГО быстрее работать со строками, чтобы создать фрагмент документа, прежде чем работать с DOM или jquery вообще. К сожалению, IE делает очень плохую работу по конкатенации строк, поэтому лучший способ сделать это - использовать массив.

var cont = []; //Initialize an array to build the content
for (var i = 0;i<10;i++) cont.push('<div>bunch of text</div>');
$('#container').html(cont.join(''));

Я использую эту технику в моем коде. Вы можете создавать очень большие html-фрагменты, используя этот метод, и он очень эффективен во всех браузерах.

Ответ 3

Вы можете обернуть собственный массив JavaScript в jQuery и использовать map(), чтобы преобразовать его в jQuery (список узлов DOM). Это официально поддерживается.

$(['plop', 'onk', 'gloubi'])
.map(function(i, text)
{
    return $('<div/>').text(text).get(0);
})
.appendTo('#container');

Это создаст

<div id="container">
<div>plop</div>
<div>onk</div>
<div>gloubi</div>
</div>

Я часто использую эту технику, чтобы избежать повторения (DRY).

Ответ 4

Вы можете использовать регулярный цикл с помощью функции JQuery append.

for(i=0;i<10; i++){
    $('#container').append("<div></div>");
}