如何通过单击按钮来反转 <ul> 的顺序

How can I reverse the order of a <ul> with the click of a button?

本文关键字：ul 顺序 单击 何通过 按钮      更新时间：2023-09-26

我一直在尝试使用 jQuery 让按钮函数颠倒<ul>的顺序。

由于某种原因，代码在单击时完全弄乱了 ul 的样式。这可能是因为我用于图像的懒惰加载器（qazy.js），但我不完全确定。它似乎打破了<ul>.

您可以在此处查看实时代码：http://designers.watch/tester.html

当您单击"反向顺序"按钮时，您将看到不良影响。

我使用的反向<ul>代码是：

$(document).ready(function(){
    $("#rev").click(function(){
        var list = $("ul li").get().reverse();
        $("ul").empty();
        $.each(list, function(i){
            $("ul").append("<li>"+list[i].innerHTML+"</li>");
        });//each
    });//function
});//ready

这两个问题是：

  • 样式搞砸了。
  • 延迟加载程序不会加载从反向排序带到列表顶部的图像。

有没有办法解决这些问题？我应该使用不同的惰性加载程序脚本吗？

提前感谢任何帮助的人。

你永远不应该仅仅使用 HTML 序列化来移动页面中的元素 - 因为你会发现它们会丢失诸如事件处理程序、样式等内容。

试试这个，代替：

$('#li-switch').on('click', function() {
  // get reversed array of elements
  var el = $('ul li').get().reverse();
  // re-append them to their parent
  $('ul').append(el);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="li-switch">Click to reverse the order</div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

当每个节点被追加时，它会自动从其在DOM中的原始位置删除，并原封不动地放回正确的位置。

您的"反向顺序"不会反转您的li，它正在创建新的，这些新订单与旧顺序不同 - 它们缺少类item而且您正在丢失架构属性。这应该可以改善您已有的内容：

$(document).ready(function(){
    $("#rev").click(function(){
        var list = $("ul li").get().reverse();
        $("ul").empty();
        $.each(list, function(i){
            $("ul").append('<li class="item">'+list[i].innerHTML+'</li>');
        });//each
    });//function
});//ready

有关重新排序列表项的详细信息，请查看此问题：jQuery 反转子元素的顺序

惰性加载器是一个更大的问题，我认为在您执行 reverese 之后需要重新初始化它，因为您的列表项及其子项是新的，并且脚本没有附加惰性加载器事件。如果您正确重新排序，此问题可能会消失。

相关文章：