javascript-jQuery追加元素数组

出于这个问题的目的,我们需要对.css()元素添加jQuery 1000个对象。

您可以这样处理:

for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    $('body').append(element);
}

这可行,但是对我来说似乎效率低下,因为AFAIK将导致1000个文档重排。 更好的解决方案是:

var elements = [];
for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    elements.push(element);
}
$('body').append(elements);

但是,这不是一个理想的世界,因此会引发错误jQuery。我知道.css()无法处理数组。

我将如何使用jQuery(我知道DocumentFragment节点,但是假设我需要在该元素上使用其他jQuery函数,例如.css())一次向DOM中添加一堆对象以提高性能?

9个解决方案
59 votes

您可以使用空的jQuery对象而不是数组:

var elements = $();
for(x = 0; x < 1000; x++) {
    elements = elements.add('<div>'+x+'</div>');
    // or 
    // var element = $('<div>'+x+'</div>');
    // elements = elements.add(element);
}
$('body').append(elements);

如果您想对循环中新生成的元素进行处理,这可能会很有用。 但是请注意,这将创建一个巨大的内部元素堆栈(在jQuery对象内部)。


看来您的代码可以与jQuery 1.8完美配合。

Felix Kling answered 2020-06-19T00:07:15Z
13 votes

你可以打电话

$('body').append(elements.join(''));

或者,您可以首先创建一个大字符串。

var elements = '';
for(x = 0; x < 1000; x++) {
    elements = elements + '<div>'+x+'</div>';
}
$(document.body).append(elements);

如您所述,最“正确”的方法可能是使用DocFrag。 这看起来像

var elements = document.createDocumentFragment(),
    newDiv;
for(x = 0; x < 1000; x++) {
    newDiv = document.createElement('div');
    newDiv.textContent = x;
    elements.append( newDiv );
}
$(document.body).append(elements);

IE <9不支持.textContent,需要条件检查才能改为使用.innerText.text

jAndy answered 2020-06-19T00:07:49Z
8 votes

由于$ .fn.append需要可变数量的元素,我们可以使用apply将数组作为参数传递给它:

el.append.apply(el, myArray);

如果您有一组jQuery对象,则此方法有效。 根据规范,如果您具有DOM元素,则可以追加元素数组。 如果您有一个html字符串数组,则可以将它们.join('')并一次附加它们。

Jethro Larson answered 2020-06-19T00:08:13Z
7 votes

升级到jQuery 1.8,可以按预期工作:

​$('body')​.append([
    '<b>1</b>',
    '<i>2</i>'   
])​;​
Alexey Lebedev answered 2020-06-19T00:08:33Z
3 votes

对第二种方法稍作更改:

var elements = [],
newDiv;
for (x = 0; x < 1000; x++) {
    newDiv = $('<div/>').text(x);
    elements.push(newDiv);
}
$('body').append(elements);

$ .append()当然可以追加一个数组:[http://api.jquery.com/append/]

.append(content)| 内容:一个或多个其他DOM元素,元素数组,HTML字符串或jQuery对象,它们插入匹配的元素集中的每个元素的末尾。

Dog answered 2020-06-19T00:09:02Z
3 votes

有时候,jQuery不是最佳解决方案。 如果您有很多要追加到DOM的元素,则documentFragment是一个可行的解决方案:

var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
document.getElementsByTagName('body')[0].appendChild(fragment);
jackwanders answered 2020-06-19T00:09:22Z
1 votes

我知道,这个问题很旧,但也许可以帮助其他人。

或简单使用ECMA6传播算子:

$('body').append(...elements);
shaedrich answered 2020-06-19T00:09:46Z
0 votes

如果您要追求原始性能,那么我建议您使用纯JS,尽管有些人认为您的开发性能比站点/程序的性能更重要。检查此链接以获得基准,以及有关不同DOM插入技术的展示。

编辑:

出于好奇,documentFragment被证明是最慢的方法之一。

MalSu answered 2020-06-19T00:10:15Z
0 votes

我会使用本机Javascript,通常快得多:

var el = document.getElementById('the_container_id');
var aux;
for(x = 0; x < 1000; x++) {
    aux = document.createElement('div');
    aux.innerHTML = x;
    el.appendChild(aux);
}

编辑:

在那里,您可以使用实现了不同选项的jsfiddle。 显然,@ jackwander的解决方案是最有效的解决方案。

davids answered 2020-06-19T00:10:44Z
translate from https://stackoverflow.com:/questions/12111740/jquery-appending-an-array-of-elements