我如何处理从 $.ajax() 返回的数据？

Question

我正在尝试通过 jQuery 配置从 $.ajax() 返回的数据...

我的例子是这样的：

首先我使用的是 codeigniter 框架（只是为了引起注意）

现在通过 ajax 我正在调用返回一组 div 的函数

exp:

function my_function() {
    for($i = 0; $i < 3; $i++) {
        print '<div class="block">'.$i.'</div>';
    }
} 

现在通过js代码：

$.ajax({
    type: "POST",
    url: "path/to/my_function",

    success: function(data){
        $('#div#container').html(data);
    }
});

现在所有 div（3 个带有块类的 div）同时出现。（我不喜欢那样）

我希望最后三个 div 中的每一个都按顺序出现（例如使用 slideDown） 现在我的具体问题是： 例如，我如何配置 ajax 通过循环返回的数据？？？？为每个 div 使用 slideDown？？

Answer 1

最初添加display:none;

function my_function() {
    for($i = 0; $i < 3; $i++) {
        print '<div class="block" style="display:none;">'.$i.'</div>';
    }
} 

然后

$.ajax({
    type: "POST",
    url: "path/to/my_function",

    success: function(data){
        $('div#container').html(data);
           $('div.block').each(function(){
             $(this).slideDown(1000);
         });
    }
});

Answer 2

如果您希望一个 div 在另一个之后显示，则在另一个 div 完成后触发每个 div 的向下滑动功能。您可以构建一个递归函数，以便您可以动态设置索引以在某些值处开始和结束。当然，你的 div id 必须正确命名，这样你才能做这样的事情。

function doSlideDown(startIndex, endIndex){
    $('div#container'+startIndex).slideDown(500, function(){
        if(startIndex < endIndex){
            doSlideDown(startIndex+1, endIndex);
        }
    });
}

$.ajax({
type: "POST",
url: "path/to/my_function",

success: function(data){
    $('div#container1').html(data);
    $('div#container2').html(data);
    $('div#container3').html(data);

    doSlideDown(1,3);
}
});

这将确保一次只滑出一个 div。