如何使用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

Answer 2

如果您只想颠倒特定元素子元素的顺序，可以执行以下操作：

$.fn.reverseChildren = function() {
  return this.each(function(){
    var $this = $(this);
    $this.children().each(function(){ $this.prepend(this) });
  });
};

$("ul").reverseChildren();

Fiddle

参考：Reverse order of a set of elements

Answer 3

$(window).resize(function () {
    if ($(window).width() <= 767) {
        $('ul').append( $.makeArray( $('ul li') ).reverse() );
    }
});

演示： http://jsfiddle.net/LsYzv/

Answer 4

首先：当人们说“这无法完成”时，我不喜欢它 当然，可以使用PURE CSS来完成。

display:flex通过多种方式为您提供帮助！

HTML ：

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

CSS ：

ul{
    display:flex;
    list-style: none;
    flex-direction:column;
}
@media(max-width: 766px){
    ul{
        flex-direction:column-reverse;
    }
}

这里是Fiddle以及嵌入的代码：

ul{
	display:flex;
	flex-direction:column;
	list-style: none;
}
@media(max-width: 766px){
	ul{
		flex-direction:column-reverse;
	}
}

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

别忘了：没有什么比没有问题的纯CSS更好了！！！