我应该如何使用jQuery向div添加多个相同的元素

I need to add multiple empty divs to a container element using jQuery.

我需要使用jQuery将多个空div添加到容器元素。

At the moment I am generating a string containing the empty html using a loop

目前我正在使用循环生成包含空html的字符串

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

and then injecting that into my container:

然后将其注入我的容器中:

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

Is there a more elegant way to insert multiple, identical elements?

是否有更优雅的方式来插入多个相同的元素?

I'm hoping to find something that wouldn't break chaining but wouldn't bring the browser to its knees. A chainable .repeat() plugin?

我希望找到一些不会破坏链接但不会让浏览器瘫痪的东西。一个可链接的.repeat()插件?

4 个解决方案

#1

If you want IE to be fast - or generally consider speed, then you'll want to build up a DOM fragment first before inserting it.

如果你想要IE很快 - 或者通常考虑速度,那么你需要在插入之前先构建一个DOM片段。

John Resig explains the technique and includes a performance benchmark:

John Resig解释了该技术,并包括性能基准:

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);

I realise it's not making a lot of use of jQuery in building up the fragment, but I've run a few tests and I can't seem to do $(fragment).append() - but I've read John's jQuery 1.3 release is supposed to include changes based on the research linked above.

我意识到它并没有在构建片段时大量使用jQuery,但我已经运行了一些测试而且我似乎无法做$(fragment).append() - 但我已经阅读了John的jQuery 1.3发布应该包括基于上面链接的研究的变化。

#2

The fastest way to do this is to build the content first with strings. It is MUCH faster to work with strings to build your document fragment before working with the DOM or jquery at all. Unfortunately, IE does a really poor job of concatenating strings, so the best way to do it is to use an array.

最快的方法是首先使用字符串构建内容。在使用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(''));

I use this technique a ton in my code. You can build very large html fragments using this method and it is very efficient in all browsers.

我在代码中使用了这种技术。您可以使用此方法构建非常大的html片段,并且在所有浏览器中都非常高效。

#3

You can wrap a native JavaScript array in a jQuery and use map() to transform it into a jQuery (list of DOM nodes). This is officially supported.

您可以将本机JavaScript数组包装在jQuery中,并使用map()将其转换为jQuery(DOM节点列表)。这是官方支持的。

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

This will create

这将创造

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

I often use this technique in order to avoid repeating myself (DRY).

我经常使用这种技术以避免重复自己(DRY)。

#4

You can use a regular loop with the Jquery append function.

您可以使用带有Jquery追加功能的常规循环。

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

#1