jquery - 如何创建 jQuery 元素的集合并将它们 append 到 DOM？

Question

我正在循环一个列表，需要创建一个 jQuery Mobile radio button对于每个列表元素。所有单选按钮都应位于 div class="radio-controls" 内，一旦完成，就会 append 到 DOM。

这是我正在尝试的:

    var label = $("<label/>").attr("data-" + $.mobile.ns + "iconpos", "notext");
      barrel = [];

    for (var i = 0; i < myListitems.length; i += 1) {
      var item = myListitems[i];

      barrel.push(
          $("<input type='radio' name='radio-" + this.uuid + "' value='radio-" + this.uuid + "-" + i +"' />" )
            .wrap(label)
            .checkboxradio()
        );
      }
    }

循环之后我有一个 jQuery 数组，我需要 append 它。

但是makeArray失败并返回

context is undefined

jQuery 内部

 if ( ( context.ownerDocument || context ) !== document ) {

据说这是由于数组不由从文档中选择的元素组成(我的仍然没有添加到DOM中)，而document.createFragement不起作用，因为我认为我无法将 jQuery 对象添加到片段。这样做:

 var fragment = document.createDocumentFragment();

 // in my loop
 bullet = $("<input type='radio' name='radio-" + this.uuid + "' value='radio-" + this.uuid + "-" + i +"' />" )
     .wrap(label)
     .checkboxradio()
 fragment.appendChild( bullet );

 // after loop, add to document 
 fragment[o.bulletsPos === "top" ? prependTo : appendTo](el);

返回此错误:

 Value does not implement interface Node.

问题: 有没有办法生成 jQuery 项的集合并将其 append 到 DOM 中？当然，我可以逐一插入每个项目，但我想动态创建整个项目并插入一次。

感谢您的帮助!

Answer 1

能够将其 append 以下示例代码:

var collection = [];
var elem;

for (var i = 0; i < 10; i+=1) {
    elem = $("<span />").attr("class","foo-"+i).text("hello");
    collection.push(elem);
}
console.log(collection);
// the "context" error
//$(collection).appendTo(document.body);
$(document.body).append(collection);

fiddle 演示:http://jsfiddle.net/558qq/3/