如何在jquery中的foreach之后插入一个最终项目?

时间:2013-01-09 09:52:12

标签: javascript jquery settimeout

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

我试图插入

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

或其中的几个变体(after,appendChild等)并且不能让它按照我的意愿执行。目前它增加了一个新的div但是在foreach开始之前它并没有遵循foreach所做的fadeIn延迟模式。

如何在foreach之后添加具有相同效果的div。作为一个最后的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>');

        },
    });
}

1 个答案:

答案 0 :(得分:2)

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

你可以替换

$('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函数。