2017-05-23 10 views
2

私は数日前にクラス名に基づいてdivをソートすることについてこの質問をしました。私は、画面の幅が1200よりも小さいときにdivをソートすることは可能ですか? 1200より上では、彼はdiv要素を元の位置に戻します。 (デスクトップ上で画面のサイズが変更されても機能するはずです)画面サイズに基づいてdivをソートする

この機能を実行する前に古い注文を配列に保存しようとしました。私は1 - xの番号を持つすべての単一の行にデータ属性を追加します。しかし、それは私が考える少しやり過ぎ..

var windowWidth = $(window).width(); 

order = function(){ 
    var elem = $('.container').find('.row').sort(sortMe); 

    function sortMe(a, b) { 
     return a.className.split(' ').pop() < b.className.split(' ').pop(); 
    } 

    $('.container').append(elem); 
}; 

// now the rows are sorted when the screen is smaller then 975 or 1185 but it possible to get the old order back when the screen is bigger then 975 or 1185 (when the screen resizes) 
if($('body').hasClass('front')){ 
    if(windowWidth < 975){ 
     order(); 
    } 
}else{ 
    if(windowWidth < 1185){ 
     order(); 
    } 
} 

ためのデスクトップ(> 1185)管理者は、CMSでソートを決定したが、画面がより小さければ(< 1185)は、私はソートを決める上で、そのですクラスに基づいています。

答えて

1

この問題は、注文機能が実行される前にdata-attrを追加することで解決しました。スクリーンサイズがxより大きい場合、配列を使用せずにdata-attrの値に基づいて要素をソートします。それが小さい場合は、私のクラスに基づいてソートします。

デスクトップ用とモバイル用の2つのソート機能があります。私のためにうまくいく。

関連する問題