javascript - 有没有办法在 Jquery 链接语句中添加 x 元素作为新创建元素的子元素？

Question

我正在使用以下内容：

 var topWrapper = $('<div />')
    .addClass( 'table-top-wrapper ui-corner-top ui-body-'+o.wrapperTheme )
    .grid({ grid: this.options.grid })
    .append(container)
    .insertBefore(table);

并且需要在x调用.div.grid

说x=3有没有办法将x子 div 的数量附加到链中新创建的 div 元素？像可链接的东西for-loop？

感谢您的见解！

Answer 1

您可以创建一个元素数组并追加：

var x = 3;

var topWrapper = $('<div />')
.addClass( 'table-top-wrapper ui-corner-top ui-body-'+o.wrapperTheme )
.append($.map(new Array(x), function(){
  return $('<div/>');
}))
.grid({ grid: this.options.grid })
.append(container)
.insertBefore(table);

Answer 2

您可以像这样创建自己的 jQuery 扩展：

$.fn.appendMultipleChildren = function(child, repeat) {
    var $this = $(this);
    for (var i = 0; i < repeat; i++) {
        $this.append(child.clone());
    }
    return $this;
}

然后打电话

 var topWrapper = $('<div />')
    .addClass( 'table-top-wrapper ui-corner-top ui-body-'+o.wrapperTheme )
    .grid({ grid: this.options.grid })
    .appendMultipleChildren($('<div />'), 3)
    .append(container)
    .insertBefore(table);

编辑- 这是一个 jsfiddle 示例：http: //jsfiddle.net/eJGxm/

Answer 3

最有效的方法是将它们组装成一个字符串，然后调用jQuery.html. 不过，这不会使循环可链接。如果你真的想这样做，你可以将它们包装在一个函数中：

topWrapper = $('<div />')
    .addClass( 'table-top-wrapper ui-corner-top ui-body-'+o.wrapperTheme )
    .html((function(){
       var markup = '';
       for (var i =0; i < 3; i++) {
         markup .= '<div></div>';
       }
       return markup;
    })())
    .grid({ grid: this.options.grid })
    .append(container)
    .insertBefore(table);

就个人而言，尽管我发现在进行 topWrapper 调用之前比执行循环更难阅读。