jQuery附加一个元素数组 [英] jQuery appending an array of elements

查看:28
本文介绍了jQuery附加一个元素数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

对于这个问题,假设我们需要 append() 1000 个对象到 body 元素.

你可以这样做:

for(x = 0; x <1000; x++) {var element = $('

'+x+'

');$('body').append(元素);}

这有效,但对我来说似乎效率低下,因为 AFAIK 这将导致 1000 次文档回流.更好的解决方案是:

var elements = [];for(x = 0; x <1000; x++) {var element = $('

'+x+'

');元素推(元素);}$('body').append(elements);

然而,这不是一个理想的世界,这会引发错误无法转换 JavaScript 参数 arg 0 [nsIDOMDocumentFragment.appendChild].我知道 append() 不能处理数组.

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

解决方案

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

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

如果您想在循环内使用新生成的元素执行操作,这可能很有用.但请注意,这将创建一个巨大的内部元素堆栈(在 jQuery 对象内部).

<小时>

看来 您的代码在 jQuery 1.8 上运行良好.

For the purpose of this question lets say we need to append() 1000 objects to the body element.

You could go about it like this:

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

This works, however it seems inefficient to me as AFAIK this will cause 1000 document reflows. A better solution would be:

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

However this is not an ideal world and this throws an error Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]. I understand that append() can't handle arrays.

How would I using jQuery (I know about the DocumentFragment node, but assume I need to use other jQuery functions on the element such as .css()) add a bunch of objects to the DOM at once to improve performance?

解决方案

You could use an empty jQuery object instead of an array:

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

This might be useful if you want to do stuff with newly generated element inside the loop. But note that this will create a huge internal stack of elements (inside the jQuery object).


It seems though that your code works perfectly fine with jQuery 1.8.

这篇关于jQuery附加一个元素数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆