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 1}}其中额外的旧ele从页面中消失。这是可能的还是取代整个html是一种更好的方法？

我希望这是有道理的

Answer 1

以下是获取响应中行数的代码。

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

                            //number of ele rows added
                            var eleCount = $('.ele', $(html)).length;

                            $("#BigBox").html(html);
                            })
                        });
            }, 60000);

在删除和添加内容方面，如果您知道要删除的内容的索引，则可以使用jquery删除和添加元素。例如，您可以这样做：

$('.ele:nth-child(4)', $(html)).remove();

这会从列表中删除第四个元素。

希望这会有所帮助。

Answer 2

我假设您只想保留3个SmallBox es，每个都有容量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();
})

Answer 3

类似于this fiddle？

// save fixed elements/data
var $bigBox = $('#BigBox'),
    $smallBox = $bigBox.children().first().clone().empty(),
    capacity = 3;

done = function(html) {
    var $newElems = $(html),
        $currentElems = $bigBox.find('.ele');

    $currentElems.unwrap().slice(-$newElems.length).remove();
    $bigBox.prepend($newElems);
    $currentElems = $bigBox.children();

    var numBoxes = Math.ceil($currentElems.length / capacity);

    for(var i = 0; i < numBoxes; i++) {
        $smallBox.clone()
          .appendTo($bigBox)
          .append($currentElems.splice(0, capacity));
    }
};

done('<div class="ele highlight">10</div>');
done('<div class="ele highlight">11</div><div class="ele highlight">12</div>');

请注意，使用此代码，您可以选择一个smallBox应包含的元素数量，并且在添加的元素数量方面完全免费，它构建所需数量的容器以包装所有.ele。

删除div内div的最后一个div

3 个答案: