jquery - jQuery + 循环在 jsfiddle 中不起作用

Question

我有以下脚本，我似乎无法在jsfiddle中工作：

我不明白为什么这不起作用？

var $widget = $("<div class='widget widget_" + i + "'>").appendTo( $(".column_" + j );
$("<div class='widget_header widget_header_" + i + "'>").appendTo( $widget );
$("<div class='widget_sub_header widget_sub_header_" + i + "'>").appendTo( $widget );
$("<div class='widget_content widget_content_" + i + "'>").appendTo( $widget );
$("<div class='widget_footer widget_footer_" + i + "'>").appendTo( $widget );

Answer 1

您的脚本中有错误。您忘记了以下行中的右括号：

var $widget =                   // --------------------------------------v
    $("<div class='widget widget_" + i + "'>").appendTo( $(".column_" + j) );

演示：http: //jsfiddle.net/wq6Cc/18/

Answer 2

你必须改变这个

var $widget = $("<div class='widget widget_" + i + "'>").appendTo( $(".column_" + j );

到

  var $widget = $("<div class='widget widget_" + i + "'>").appendTo( $(".column_" + j ) );

它会完美地工作。

Answer 3

与您的问题无关，稍微修改一下您的代码可能会更干净。

$('#divMain').empty()
    .append( $('<div>').addClass('column column_1') )
    .append( $('<div>').addClass('column column_2') )
    .append( $('<div>').addClass('column column_3') );

$('.column').sortable({
    tolerance   : 'pointer',
    connectWith : '.column'
});

for (var j = 1, i; j <= 3; j++) {
    for (i = 0; i <= 2; i++) {
        $('<div>').addClass('widget widget_' + i)
            .append( $('<div>').addClass('widget_header widget_header_' + i) )
            .append( $('<div>').addClass('widget_sub_header widget_sub_header_' + i) )
            .append( $('<div>').addClass('widget_content widget_content_' + i) )
            .append( $('<div>').addClass('widget_footer widget_footer_' + i) )
            .appendTo('.column_' + j);
    }
}