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

因为在桌面上（＆gt; 1185），管理员决定CMS中的排序，但如果屏幕小于（＆lt; 1185），我决定排序，这是基于类。

Answer 1

我通过在订单功能运行之前添加data-attr来解决此问题。当屏幕尺寸大于x时，我会根据data-attr的值对元素进行排序，而不使用数组。如果它更小，我会根据我的班级对它们进行排序。

您有两种排序功能，一种用于桌面，另一种用于移动。适合我。

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

1 个答案: