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

我正在尝试做一些响应性修复-目前我有一个类似这样的列表：

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

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

666
555
444
333
222
111

如果屏幕大小小于767px，我希望它能改变如下顺序：

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

111
222
333
444
555
666

如果大小增加，请将其修复回当前状态

我明白这不能通过CSS媒体查询来完成，我需要你的帮助通过jQuery来修复它

---

提前感谢您的帮助。

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

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

$("ul").reverseChildren();

---

参考资料：

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

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

$("ul").reverseChildren();

参考：

$（窗口）。调整大小（函数（）{
if（$（窗口）.width（）
$（窗口）.resize（函数（）{
如果（$（window）.width（）您可以反转
ul
元素中的元素，如下所示：

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

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

与
窗口组合。调整大小
：

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

var resizeTimeout，sortedReverse=false；
$（窗口）。调整大小（函数（）{
//调整窗口大小太快，我们不喜欢
//使用清除设置超时方法
如果（重新设置超时）{
clearTimeout（resizeTimeout）；
}
resizeTimeout=window.setTimeout（函数（）{
var windowWidth=$（window.width（）；
//sortedReverse标志用于确保
//我们不会不必要地颠倒清单
if（（窗宽<767&&！sortedReverse）| |（窗宽>=767&&sortedReverse））{
$（“ul”）.append（函数（）{
返回$（this.children（）.detach（）.toArray（）.reverse（）；
});
sortedReverse=！sortedReverse；
}
}, 100);
}).触发（“调整大小”）；

您可以反转
ul
元素中的元素，如下所示：

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

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

与
窗口组合。调整大小
：

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

var resizeTimeout，sortedReverse=false；
$（窗口）。调整大小（函数（）{
//调整窗口大小太快，我们不喜欢
//使用清除设置超时方法
如果（重新设置超时）{
clearTimeout（resizeTimeout）；
}
resizeTimeout=window.setTimeout（函数（）{
var windowWidth=$（window.width（）；
//sortedReverse标志用于确保
//我们不会不必要地颠倒清单
if（（窗宽<767&&！sortedReverse）| |（窗宽>=767&&sortedReverse））{
$（“ul”）.append（函数（）{
返回$（this.children（）.detach（）.toArray（）.reverse（）；
});
sortedReverse=！sortedReverse；
}
}, 100);
}).触发（“调整大小”）；

首先：我不喜欢人们说“这是做不到的”
当然，这可以用纯CSS来完成

display:flex
在很多方面都对您有所帮助

HTML：

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

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

以下是嵌入的代码：


ul{
显示器：flex；
弯曲方向：立柱；
列表样式：无；
}
@介质（最大宽度：766px）{
保险商实验室{
弯曲方向：柱反向；
}
}

666
555
444
333
222
111
首先：我不喜欢人们说“这是做不到的”
当然，这可以用纯CSS来完成

display:flex
在很多方面都对您有所帮助

HTML：

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

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

以下是嵌入的代码：


ul{
显示器：flex；
弯曲方向：立柱；
列表样式：无；
}
@介质（最大宽度：766px）{
保险商实验室{
弯曲方向：柱反向；
}
}

666
555
444
333
222
111
在不知道该列表的用途和布局的情况下，我会使用flexbox并使用mediaqueries执行flex direction:row reverse；这听起来可行吗？首先，你的html无效。你必须关闭你的
li
元素。
@laaposto感谢你让我知道，我已经修复了它。请帮助我修复这个问题issue.size的意思是
高度
或
宽度
？@laaposto-似乎我应该检查编辑历史以了解你的意思-显然这是无效的。我只是字面上理解了你的话“必须关闭你的li”，这并不准确，但考虑到你为什么这么说，我得到了奇怪的标记。这比“打开的
不能超过所需数量-使用斜杠（
）关闭或取出尾随
"在不知道该列表的用途和布局的情况下，我会使用flexbox并使用mediaqueries执行flex direction:行反转。这听起来可行吗？首先，您的html无效。您必须关闭
li
元素。
@laaposto感谢您让我知道，我已经解决了它。请帮助我解决这个问题。size means
Height
或
Width
？@laaposto-似乎我应该检查编辑历史以了解你的意思-显然这是无效的。我只是字面上理解了你的话“必须关闭你的li”，这并不准确，但考虑到你为什么这么说，我得到了奇怪的标记。这比“打开的
不得超过所需数量-使用斜杠（
）关闭或取出尾随的
”+1表示花费时间制作干净的解决方案：）+1表示花费时间制作干净的解决方案：）