0

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

var options = [];

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

该options数组用作页面上许多选择的模板。所以我想补充：

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

我想做到这一点，而不必将所有选项包装成一个附加选项$('<div>')，然后用children().

是否可以创建一个空的 jQuery 对象并按顺序附加到它的元素，而不依赖于父元素和children函数？（$.add不保证不在 DOM 中的元素的顺序）

4

2 回答 2

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);
});
于 2013-10-08T13:12:20.750 回答
0

以下代码似乎工作得很好：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);

于 2013-10-08T12:57:39.157 回答