如何通过单击按钮来反转的顺序？

我一直在尝试使用jQuery使按钮function颠倒

的顺序。

出于某种原因，代码在点击时完全混淆了ul的样式。 这可能是因为我正在使用的懒惰加载器（qazy.js），但我不完全确定。 它似乎打破了

。

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

单击“反向订单”按钮时，您将看到不良影响。

我使用的代码反向

是：

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

这两个问题是：

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

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

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

Answer 1

你的“反向订单”不会改变你的li ，它会创建新的，而那些新的不同于那些旧的 – 它们缺少item类，而且你正在失去你的架构属性。 这应该可以改善你已经拥有的东西：

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

有关重新排序列表项的更多信息，请查看此问题： jQuery颠倒子元素的顺序

懒惰的加载器是一个更大的问题，我认为它需要在你做尊敬之后重新初始化，因为你的列表项和它们的子项是新的，并且没有脚本附加的延迟加载器事件。 如果你正确地重新排序，这个问题可能会消失。

Answer 2

你永远不应该只使用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); }); 

  
Click to reverse the order
 
 
One
 
Two
 
Three
 
Four
 
Five