2

次のスクリプトがありますが、期待どおりに動作していません。

success: function( widget_shell ) 
{ 
    if( widget_shell.d[0] ) {
        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {
           $( ".column_" + widget_shell.d[i].column_id ).append( "<div class='widget_" + widget_shell.d[i].widget_id + "'>" );
           $( ".widget_" + widget_shell.d[i].widget_id ).append( "<div class='widget_content_" + widget_shell.d[i].widget_id + "'>" );
           $( ".widget_" + widget_shell.d[i].widget_id ).append( "</div>" );
           $( ".column_" + widget_shell.d[i].column_id ).append( "</div>" );
        }
    }

これにより、次のようなHTMLが生成されます。

<div id="divMain">
    <div class="column_1 ui-sortable">
        <div class="widget_9">
            <div class="widget_content_9"></div>
            <div class="widget_content_9"></div>
        </div>
    </div>
    <div class="column_2 ui-sortable">
        <div class="widget_9">
            <div class="widget_content_9"></div>
        </div>
    </div>
    <div class="column_3 ui-sortable">
        <div class="widget_58">
            <div class="widget_content_58"></div>
        </div>
    </div>
</div>

JSONデータが次のようになっている場合：

{
    "d": [
        {
            "__type": "Widget_Shell",
            "column_id": 1,
            "widget_id": 9
        },
        {
            "__type": "Widget_Shell",
            "column_id": 2,
            "widget_id": 9
        },
        {
            "__type": "Widget_Shell",
            "column_id": 3,
            "widget_id": 58
        }
    ]
}

つまり、基本的に、JSONデータに基づいて列ごとに1つのウィジェットしか表示されないはずですが、これは問題ありませんが、何らかの理由で、最初の列ウィジェットに2つのコンテンツが表示されることになります...

なぜですか？

4

1 に答える 1

5

jQuery関数は、を使用して要素を選択するときにドキュメント全体を検索します$("...")。あなたの場合、2回目の反復では、2つの.widget_9要素があり、それぞれに<div>追加されます。

必要なのは、作成したばかりの要素に追加することだけです。これは、次のコマンドで実行できます.appendTo。

var $widget = $("<div class='widget_" + widget_shell.d[i].widget_id + "'>")
                .appendTo(".column_" + widget_shell.d[i].column_id);

$("<div class='widget_content_" + widget_shell.d[i].widget_id + "'>")
  .appendTo($widget);

$widgetは反復ごとに1つの新しい要素で上書きされるため、前の反復の要素をいじることはありません。

jQueryは、を使用して要素を作成する方法を知っている$("<div>")ため、終了タグは必要ありません。iまた、のように宣言する必要がありvar iます。

于 2012-11-06T13:29:32.010 に答える