Question

I have the following structure

<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>

At the moment I fetch new ele divs with this:

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

This updates replace all the content of BigBox and update.html returns

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

---

What I want to do now is have a way of telling of how many new ele are coming in, and then remove that number from the bottom up and push the new ele from top to bottom,
so when new ele are pushed into the top SmallBox which can only hold 3, the last div in that small box get pushed down to the next SmallBox and so on until the last SmallBox where the extra old ele there disappears from the page. Is that possible or is replacing the whole html is a better approach?

I hope this make sense

Answer 1

I assume you want to keep only 3 SmallBoxes, each which has capacity 3. The following adds new elements at the top, and gets rid of extras at the bottom.

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