2

ajaxを介してフェッチされたJSONオブジェクトを反復処理し、そのコンテンツをループして、結果を3sの遅延でdivに表示しようとしています。

    var resultHtml = "";
$test = $.parseJSON('{"zone_1":"ZONE 1 NORMAL","zone_2":"ZONE 2 NORMAL","zone_3":"ZONE 3 NORMAL","zone_4":"ZONE 4 NORMAL","zone_5":"ZONE 5 NORMAL","zone_6":"ZONE 6 NORMAL","zone_7":"ZONE 7 NORMAL","zone_8":"ZONE 8 NORMAL"}');
$.each($test, function(key,value){
    console.log("start :"+value);
        $('#results').delay(5000).html(value);
    console.log("end :"+value);
    })

私はこれを試しましたhttp://jsfiddle.net/XsMK2/71/

しかし、どういうわけか、すべてのコンテンツを表示できないようです。最後の要素のみが表示されます。

4

2 に答える 2

2

.append()の代わりに使用し.html()ます。（innerHTML）.html()内のhtmlコード全体を置き換え、最後に追加するだけです。作業中の jsFiddle。div.append()

最後の反復のみが残るまで、前の反復を上書きしました。

編集：

追加情報に従って、新しい jsFiddleを確認してください。すべてのアイテムを追加しましたが、それらを設定display:noneしてから、setInterval を使用して、表示されているアイテムを切り替えます。

于 2013-07-21T15:50:44.867 に答える
1

時間を増やしてタイムアウトを使用することをお勧めします。

    var resultHtml = "";
$test = $.parseJSON('{"zone_1":"ZONE 1 NORMAL","zone_2":"ZONE 2 NORMAL","zone_3":"ZONE 3 NORMAL","zone_4":"ZONE 4 NORMAL","zone_5":"ZONE 5 NORMAL","zone_6":"ZONE 6 NORMAL","zone_7":"ZONE 7 NORMAL","zone_8":"ZONE 8 NORMAL"}');
var i = 0;
$.each($test, function(key,value){
    console.log("start :"+value);
    setTimeout(function () {
        $('#results').html(value);
    }, 250 * i);
    i ++;
    console.log("end :"+value);
})

フィドル: http://jsfiddle.net/GFSdY/

ここで何が起きてるの？

var iを、見つけたすべてのインデックスのカウンターと定義します。eachループは、すべてのペアに対して即座に実行されます(key, vlue)。各反復で、カウンターを 1 ずつ増やします。

最初のタイムアウトは即座(0 * 250)に実行され、2 回目は 250 ミリ秒後(1 * 250)など...

于 2013-07-21T15:59:49.607 に答える