我需要使用 jQuery 将多个空 div 添加到容器元素。
目前我正在使用循环生成一个包含空 html 的字符串
divstr = '<div></div><div></div>...<div></div>';
然后将其注入我的容器中:
$('#container').html(divstr);
有没有更优雅的方式来插入多个相同的元素?
我希望找到一些不会破坏链接但不会让浏览器崩溃的东西。一个可链接的.repeat()
插件?
我需要使用 jQuery 将多个空 div 添加到容器元素。
目前我正在使用循环生成一个包含空 html 的字符串
divstr = '<div></div><div></div>...<div></div>';
然后将其注入我的容器中:
$('#container').html(divstr);
有没有更优雅的方式来插入多个相同的元素?
我希望找到一些不会破坏链接但不会让浏览器崩溃的东西。一个可链接的.repeat()
插件?
如果您希望 IE 更快 - 或者通常考虑速度,那么您需要先构建一个 DOM 片段,然后再插入它。
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);
我意识到在构建片段时并没有大量使用 jQuery,但我已经运行了一些测试,但我似乎无法执行 $(fragment).append() - 但我已经阅读了 John 的 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 中,并使用 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)。
您可以使用带有 Jquery附加功能的常规循环。
for(i=0;i<10; i++){
$('#container').append("<div></div>");
}