有没有办法在 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);

并且需要在呼叫.grid之前将x孩子附加到此div。

假设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调用之前进行循环更难阅读。