19

AJAX を介して定期的に更新される data-weight-attribute を持つコンテンツを含む複数の DIV があります。

ajax-request からの新しい値を反復処理するループでそれらを並べ替えます。

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

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

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

説明するのも理解するのも難しいので、ここに私のフィドルがあります：

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

アップデート

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

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

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

アイデア大歓迎!!

4

3 に答える 3

19

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

$("#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 オブジェクト内のアイテムを並べ替えdata-weightます。次に、それらを新しい順序で調べて、ラッパーに追加します。DOM に.append()既にあるアイテムを移動すると、アイテムが移動することに注意してください。

于 2013-04-21T08:29:54.837 に答える
8

これはあなたがそれを並べ替える方法です：

var $wrapper = $('#wrapper'),
    $art = $wrapper.children('.article');

$art.sort(function(a, b) {
    return +$(a).data('weight') - +$(b).data('weight');
})
.each(function() {
    $wrapper.append(this);
});

http://jsfiddle.net/dfsq/PdGTK/8/

于 2013-04-21T08:40:28.057 に答える