Question

我一直在尝试使用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

这两个问题是：

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

有没有办法解决这些问题？我应该使用不同的延迟加载器脚本吗？

提前感谢任何帮助过的人。

Answer 1

你应该从不使用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中的原始位置移除，然后放回到正确的位置未修改。

Answer 2

你的“逆序”不会反转你的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 reversing the order of child elements

延迟加载程序是一个更大的问题，我认为在你执行崇拜之后需要重新初始化，因为你的列表项及其子项是新的，并且没有脚本附加的延迟加载程序事件。如果你正确地重新排序，这个问题可能会消失。

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

2 个答案: