javascript - 从顶部动态添加元素并从底部删除相同数量的元素

Question

这里我制作了添加 n 个 div 的函数，同时删除了 n 个 div。但是在我的代码中，我从底部附加 div 并从顶部删除 div。我只想从中反转。Divs应在顶部添加并从底部删除。

fiddle : https://jsfiddle.net/xddn8x04/3/

<div class="visible-md visible-lg sidebar">
        <div class="follow-box" data-spy="affix" data-offset-top="200">
            <!-- <div>You may follow</div> -->

            <div class="follow-container">
                <div class="follow_title">People you may follow</div>
                    <div class="set-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>
                            </div>
                            <div class="center-block">
                                 <div class="name">Malica Ross</div>
                            </div>
                        </div>
                        <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>
                            </div>
                            <div class="center-block">
                                <div class="name">Ajmal Bilal</div>
                            </div>
                        </div>
                        <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>
                            </div>
                            <div class="center-block">
                                <div class="name">Shung ching</div>
                            </div>
                        </div>
                        <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>
                            </div>
                            <div class="center-block">
                                <div class="name">Shrew mykong</div>
                            </div>
                        </div>
                        <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>
                            </div>
                            <div class="center-block">
                                <div class="name">Fenny Sharma</div>
                            </div>
                        </div>
                    </div>
                    <div class="hide-follow"></div>
                </div>

            <div class="follow-suggestions"></div>
        </div>
    </div>

<小时/>

 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();
  });

Answer 1

使用

$('.someParentClass')('.someClass').slice(-5).remove();

要删除某些 someParentClass' 中 someClass 类的最后 5 个 div，如果 $abc` 是您要添加到顶部的 html，请使用

$(".someParentClass").prepend($abc) 或$(".someParentClass").html($abc+$(".someParentClass").html())