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

时间:2015-10-30 18:36:54

标签: javascript jquery

这里我已经创建了添加n个div的功能,同时删除了n个div。但是在我的代码中我从底部追加div并从顶部删除div。我只想从它反转.Divs应该在顶部添加并从底部移除。

小提琴: 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();
  });

1 个答案:

答案 0 :(得分:0)

使用

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

删除某些someClass $ abc`中的最后5个div someParentClass', and if的div是你要在最常用的地方添加的html

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