jquery - 根据屏幕大小对 div 进行排序

Question

几天前我问了这个关于根据类名对 div 进行排序的问题。我在想，是否可以在屏幕宽度低于1200时对div进行排序？在 1200 以上，他将 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)，我决定排序，这是基于类。

Answer 1

我通过在订单函数运行之前添加一个 data-attr 解决了这个问题。当屏幕尺寸大于 x 时，我根据 data-attr 的值对元素进行排序，而不使用数组。如果它较小，我会根据我的类(class)对它们进行排序。

您有两种排序功能，一种用于桌面设备，一种用于移动设备。对我来说效果很好。