jQuery追加一个元素数组

Question

出于这个问题的目的,我们可以说我们需要append()1000个body元素对象.

你可以这样做:

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

然而,这不是一个理想的世界,这会引发错误Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild].我明白append()无法处理数组.

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

Answer 1

您可以使用空的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完美搭配.

Answer 2

你可以打电话

$('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);

^{.textContentIE <9不支持并且需要使用.innerText或.text替代使用条件检查.}

Answer 3

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

el.append.apply(el, myArray);

如果你有一个jQuery对象数组,这是有效的.根据规范,如果你有DOM元素,你可以附加一个元素数组.如果你有一个html字符串数组,你可以只用.join('')将它们全部追加到一起.

Answer 4

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

?$('body')?.append([
    '<b>1</b>',
    '<i>2</i>'   
])?;?