javascript - 如何在 jquery 中的 foreach 之后插入最后一项？

Question

我正在获取一些 json 并将其返回，为每个对象创建一个新的 div。我现在正在尝试添加一个最终的 div(不是来自 json)，它只是说一些类似“这可能是你的!”的内容。

我试过插入

$('section#fans').append('<div class="fan">new div</div>');

或它的几种变体(之后，appendChild 等)，无法让它按照我的意愿执行。目前，它添加了一个新的 div，但在 foreach 启动之前，它不遵循 foreach 所做的淡入延迟模式。

我怎样才能让它在foreach之后添加具有相同效果的div。作为一个最终的股利？就好像它属于json，虽然它不会和之前的模板一样。

function get_fans(){

    $.ajax('http://localhost/facebook_app/selectFans/', {
        type : 'get',
        dataType: 'json',
        success : function (data) {
            $.each(data, function(index) {setTimeout(function(){

                var first_name = data[index].first_name;
                var location = data[index].location;
                var imagePath = data[index].image_path;

                var d = $('<div class="fan"><img src="http://localhost/uploads/' + imagePath + '" width="170" height="160" />' + first_name + ', ' + location +'</div>');
                $('section#fans').append(d);
                d.hide();
                d.fadeIn('50');

                }, 250*(index +1));


            });

            $('section#fans').append('<div class="fan">new div</div>');

        },
    });
}

Answer 1

您的“最终”插入会立即完成，而其他插入会在超时后完成。

你可以替换

$('section#fans').append('<div class="fan">new div</div>');

与

setTimeout(function(){
    $('#fans').append('<div class="fan">new div</div>');
}, 250*(data.length +2));

这样最后的插入将在所有其他操作完成之后完成。

旁注:不要使用 $('section#fans') 而要使用 $('#fans')。这会更快，因为 jQuery 将使用快速的 document.getElementById 函数。