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);
    }
}