☰

DOMに再挿入せずにDIVを再配置/並べ替える 質問する

tag-icon • tag-icon jquery sorting dom
DOMに再挿入せずにDIVを再配置/並べ替える 質問する

AJAX 経由で定期的に更新される data-weight-attribute を持つコンテンツを含む DIV がいくつかあります。

私は、Ajax リクエストから来る新しい値を反復処理するループ内でそれらをソートします。

データの重みはいつでも任意の値に更新できるため、順序は更新ごとに完全に変わる可能性があります。

私のソートロジックは欠陥があるようです（控えめに言っても ;)）すべての要素を次の要素と比較するだけなので.next()、ソートされるまで 4 つの要素に対して最大 4 回「データ重みでソート」をクリックする必要があります（下のフィドルを参照）。

並べ替える DIV には画像やビデオなどの外部リソースが含まれているため、それらを移動して再作成しないことが重要です。DOM に再挿入すると、含まれているリソースが再ロードされ、私のユースケースでは受け入れられないと考えられるためです。

説明するのが難しく、理解しにくいかもしれないので、私のやり方をここに示します。

http://jsfiddle.net/PdGTK/5/

アップデート

主な問題は解決しましたが、YouTube ビデオが含まれている場合、ビデオが DOM 内で位置を変えていなくても、DIV が並べ替えられるたびにビデオが再ロードされるという問題がまだ残っています。これは、a) 見た目が変で、b) ビデオの再生が中断されます。このトピックについてさらに読むと、DOM 内で iframe を移動すると、常にコンテンツが再ロードされるようです。これは愚かなことです。

Fiddle は、YT ビデオの固定データ重み 1 で更新されるため、常に最上位に表示されます。

http://jsfiddle.net/PdGTK/10/

アイデア大歓迎です!!

ベストアンサー1

最初に思いついた方法は次のとおりです。

$("#sortButton").on("click", function () {
    var $wrapper = $('#wrapper'),
        $articles = $wrapper.find('.article');
    [].sort.call($articles, function(a,b) {
        return +$(a).attr('data-weight') - +$(b).attr('data-weight');
    });
    $articles.each(function(){
        $wrapper.append(this);
    });
});

動作するようです:http://jsfiddle.net/PdGTK/6/

基本的に、これは$articlesすべての記事を含む jQuery オブジェクト ( ) を作成します。次に、jQuery オブジェクト内の項目を属性に従って並べ替えます。次に、新しい順序で項目を調べ、ラッパーに追加します。DOM内に既に存在する項目data-weightの場合は、その項目が移動されることに注意してください。.append()

おすすめ記事