Javascript 动态添加n个div，同时删除n个div

在这里，我为一次只需要显示5个项目的容器编写代码。如果同时添加2个元素，则应删除2个元素。我在

setTimeout

函数中遇到一些问题。在这里，我调用了2次函数。当第一次函数调用它时，添加1个元素，同时删除一个。当第二次函数调用时，我传递

setTimeout（函数（{u addContent（2）}，8000）

在这里它添加2个元素，但只删除1个元素bcz，它将计数它的计数器。请帮助我解决这个问题

演示：

var followContainer=function（）{
var倒计时；
var计数=0；
var\u addContent=函数（计数）{
var followlen=+$（'.follow容器.设置follow>.follow'）.length；
var_followcontent=（'.followSuggestions.followContainer'）；
var follow=''；
对于（var i=0；i您几乎达到了目标。您只需要两个小的更改：-

从
for
循环中删除
=
。因为这会导致
\u addContent（1）
循环两次，而
\u addContent（2）
运行三次

将
：visible
添加到
淡出
，因为它针对的是已经隐藏的元素

var followContainer = function() {
    var countdown;
    var count = 0;
    var _addContent = function(count) {
        var followlen = +$('.follow-container .set-follow > .follow').length;
        var _followcontent = ('.follow-suggestions .follow-container');
        var follow = '';
        for (var i = 0; i < count; i++) {
            follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
            $(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
                    '1000');
            $('.follow-container .set-follow').append(
                    $(".follow-container .hide-follow >.follow"));
            $(".follow-container .set-follow >.follow:visible:lt(" + count + ")").fadeOut(
            '1000');
        }

    }
    var _events = function() {
        var timeoutHandle = window.setTimeout(function() {
            _addContent(1)
        }, 5000);
        setTimeout(function() {
            _addContent(2)
        }, 8000);
    }
    var _init = function() {
        _events();
    }
    return {
        init : _init
    }
}();
$(document).ready(function() {
    followContainer.init();
});

var followContainer=function（）{
var倒计时；
var计数=0；
var\u addContent=函数（计数）{
var followlen=+$（'.follow容器.设置follow>.follow'）.length；
var_followcontent=（'.followSuggestions.followContainer'）；
var follow=''；
对于（变量i=0；i.follow”）；
$（“.follow container.set follow>.follow:visible:lt（“+count+”）。淡出(
'1000');
}
}
var_events=函数（）{
var timeoutHandle=window.setTimeout（函数（）{
_添加内容（1）
}, 5000);
setTimeout（函数（）{
_添加内容（2）
}, 8000);
}
var_init=函数（）{
_事件（）；
}
返回{
初始化：_init
}
}();
$（文档）.ready（函数（）{
followContainer.init（）；
});

创建一个JSFIDLE来显示问题。嘿，我添加了FIDLE demo@BG101，它工作得很好。感谢您的努力@BG101
var followContainer = function() {
    var countdown;
    var count = 0;
    var _addContent = function(count) {
        var followlen = +$('.follow-container .set-follow > .follow').length;
        var _followcontent = ('.follow-suggestions .follow-container');
        var follow = '';
        for (var i = 0; i < count; i++) {
            follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
            $(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
                    '1000');
            $('.follow-container .set-follow').append(
                    $(".follow-container .hide-follow >.follow"));
            $(".follow-container .set-follow >.follow:visible:lt(" + count + ")").fadeOut(
            '1000');
        }

    }
    var _events = function() {
        var timeoutHandle = window.setTimeout(function() {
            _addContent(1)
        }, 5000);
        setTimeout(function() {
            _addContent(2)
        }, 8000);
    }
    var _init = function() {
        _events();
    }
    return {
        init : _init
    }
}();
$(document).ready(function() {
    followContainer.init();
});