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>

現時点では、これで新しいeledivをフェッチします:

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 が次の div にプッシュ ダウンされ、最後の div がページから消えるSmallBoxまで続きSmallBoxます。eleそれは可能ですか、それとも全体を置き換えるのhtmlがより良いアプローチですか?

これが理にかなっていることを願っています

4

3 に答える 3

0

それぞれの容量が 3 の es を3 つだけ保持する必要があると仮定しますSmallBox。以下は、上部に新しい要素を追加し、下部に余分なものを削除します。

.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

応答の行数を取得するコードは次のとおりです。

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

これにより、リストから 4 番目の要素が削除されます。

お役に立てれば。

于 2013-02-04T16:13:58.327 に答える
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>');

このコードでは、1 つの smallBox に含める要素の数を選択でき、追加する要素の数は完全に自由であることに注意してください。すべての.ele要素をラップするのに必要な数のコンテナーを構築します。

于 2013-02-04T17:51:35.717 に答える