javascript - 删除 div 内的 div 内的最后一个 div

Question

我有以下结构

<div id="BigBox">
    <div class="SmallBox">
             <div class="ele"></div>
             <div class="ele"></div>
             <div class="ele"></div>
    </div>
    <div class="SmallBox">
             <div class="ele"></div>
             <div class="ele"></div>
             <div class="ele"></div>
    </div>
    <div class="SmallBox">
             <div class="ele"></div>
             <div class="ele"></div>
             <div class="ele"></div>
    </div>
</div>

目前我用这个获取新的 ele div:

setInterval(function() {
                $.ajax({
                    url: "update.html",
                    cache: false
                }).done(function( html ) {
                            $("#BigBox").html(html);
                            })
                        });
            }, 60000);

此更新替换了 BigBox 的所有内容并且 update.html 返回

 <div class="SmallBox">
             <div class="ele highlight"></div>//new ele
             <div class="ele"></div>
             <div class="ele"></div>
    </div>

---

我现在想做的是知道有多少新的 ele 进来，然后从下往上删除那个数字并推送新的 ele从上到下， 所以当新的 ele 被插入只能容纳 3 个的顶部 SmallBox 时，那个小盒子中的最后一个 div 被推到下一个 SmallBox 依此类推，直到最后一个 SmallBox，其中多余的旧 ele 从页面中消失。这是可能的还是替换整个 html 是更好的方法？

我希望这是有道理的

Answer 1

我假设您只想保留 3 个 SmallBox，每个容量为 3。以下代码在顶部添加了新元素，并在底部删除了额外元素。

.done(function( html ) {
    var numBoxes = 3;
    var capacity = 3;

    $eles = $(html);
    $('#BigBox').find('.SmallBox').unwrap();
    $('#BigBox').prepend($eles);
    for (var i = 0; i < numBoxes; i++ ) {
        var s = i * capacity;
        $("#BigBox").find("div.ele")
                    .slice( s, s + capacity )
                    .wrapAll("<div class='SmallBox' />");
    }
    $('div.ele').not('div.SmallBox > div').remove();
})