2

我正在尝试遍历通过ajax获取的JSON对象，遍历其内容，并将结果显示在div中，延迟为3s。

    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)，第二次在 250 毫秒后执行(1 * 250)，依此类推...

于 2013-07-21T15:59:49.607 回答