如何在不使用父 $('') 的情况下按顺序追加到 jQuery 对象<div>

Question

在准备进行一些DOM插入时，我构建了一个jQuery对象的数组。例如，选择的选项：

var options = [];
for (...) {
var $option = $('<option>')
...
options.push($option);
}

此options数组用作页面上许多选择的模板。所以我想添加：

$('.target-select').append(...)

我想做到这一点，而不必将所有选项包装到一个额外的$('<div>')中，然后用children()将它们取回。

是否可以制作一个空的jQuery对象，并按顺序向其添加元素，而不依赖父元素和children函数？($.add不保证不在DOM中的元素的顺序)

Answer 1

您可以使用DocumentFragment创建DOM片段，您可以将元素附加到其中，也可以将片段附加到DOM中的任何位置。

例如：

$(document).ready(function(){
var fragment = document.createDocumentFragment();
for (var i = 0;i < 10; i++) {
fragment.appendChild(document.createElement('option'));
}
$('#target').append(fragment);
});

Answer 2

以下代码似乎运行良好：http://jsfiddle.net/75kVb/5/

var options = [];
for (var i = 0;i < 10; i++) {
var $option = $('<option/>')
$option.text(i);     
$('.target-class').append($option);
}

你可以做一个空的选择。。。

var $select = $('<select/>');
var options = [];
for (var i = 0;i < 10; i++) {
var $option = $('<option/>')
$option.text(i);     
$select.append($option);
}
$select.appendTo('body'); // not a must, just to prove that it works.

并让他们回来：

console.log($select.find('option'));

或者，您可以将数组用作一个简单的数组(而不是<option>数组)，其中包含值那么你可以：

var options = [];
for (var i = 0; i < 10; i++){
options.push(i);
}
var newOptions = $.map( options, function( item ) { // take every second item
if (item % 2 == 0)
return '<option>' + item + '</option>';
});

填充选择的使用示例：$select.html(newOptions);