如何使用jQuery/media查询重新排序窗口大小调整上的列表项

Question

我正在尝试做一些响应式修复 - 目前我有一个这样的列表:

<ul>
  <li>666</li>
  <li>555</li>
  <li>444</li>
  <li>333</li>
  <li>222</li>
  <li>111</li>
</ul>

如果屏幕尺寸小于767px,我喜欢它改变顺序如下:

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
  <li>666</li>
</ul>

如果尺寸增加,请将它们恢复到当前状态.

我知道这不能通过CSS媒体查询来完成,我需要你的帮助通过jQuery修复它.

感谢您的帮助.

Answer 1

您可以反转元素中的ul元素,如下所示:

$("ul").append(function(){
    return $(this).children().detach().toArray().reverse();
});

结合window.resize:

var resizeTimeout, sortedReverse = false;
$(window).resize(function () {
    // window.resize fires too rapidly for our liking
    // use clear-set timeout approach
    if (resizeTimeout) {
        window.clearTimeout(resizeTimeout);
    }
    resizeTimeout = window.setTimeout(function () {
        var windowWidth = $(window).width();
        // sortedReverse flag is used to ensure that
        // we do not reverse the list unnecessarily
        if ((windowWidth < 767 && !sortedReverse) || (windowWidth >= 767 && sortedReverse)) {
            $("ul").append(function () {
                return $(this).children().detach().toArray().reverse();
            });
            sortedReverse = !sortedReverse;
        }
    }, 100);
}).trigger("resize");

在这里演示