0

我有以下结构

<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的被推到SmallBox只能容纳的顶部时3，那个小框中的最后一个 div 被推到下一个SmallBox，依此类推，直到最后一个从页面中消失的地方SmallBox。ele这是可能的还是替换整个html是更好的方法？

我希望这是有道理的

4

3 回答 3

0

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

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

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

希望这可以帮助。

于 2013-02-04T16:13:58.327 回答
0

我假设您只想保留 3 个SmallBoxes，每个容量为 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();
})
于 2013-02-04T16:22:23.113 回答
0

像这样的小提琴？

// 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元素。

于 2013-02-04T17:51:35.717 回答