如何使用jQuery/媒体查询在窗口大小上重新排序列表项目

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媒体查询来完成，我需要您的帮助来解决它。

感谢您提前的帮助。

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");

演示此处

Answer 2

如果您只想扭转特定元素的孩子的顺序，则可以做：

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

小提琴

参考：一组元素的反向顺序

Answer 3

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

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

Answer 4

首先：当人们说"不能完成"时，我不喜欢它当然可以使用纯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;
    }
}

这里的小提琴和嵌入式代码：

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更好的了！