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

StackOverflow https://stackoverflow.com/questions/201530

  •  03-07-2019
  •  | 
  •  

Вопрос

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

На данный момент я генерирую строку, содержащую пустой HTML, используя цикл.

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

а затем внедрим это в мой контейнер:

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

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

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

Это было полезно?

Решение

Если вы хотите, чтобы 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 не слишком часто используется при создании фрагмента, но я провел несколько тестов и, похоже, не могу выполнить $(fragment).append() - но я прочитал jQuery 1.3 Джона. Предполагается, что релиз будет включать изменения, основанные на исследованиях, ссылка на которые приведена выше.

Другие советы

Самый быстрый способ сделать это — сначала создать контент с помощью строк.НАМНОГО быстрее работать со строками для создания фрагмента документа, прежде чем вообще работать с 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, и он очень эффективен во всех браузерах.

Вы можете обернуть собственный массив JavaScript в jQuery и использовать карту(), чтобы преобразовать его в 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>

Я часто использую эту технику, чтобы не повторяться (СУХОЙ).

Вы можете использовать обычный цикл с Jquery добавить функция.

for(i=0;i<10; i++){
    $('#container').append("<div></div>");
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top