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

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 中的原始位置删除，并放回正确的位置未修改。