javascript - 如何使用 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");

Demo here