我该如何反转< ul>的顺序？点击一个按钮？ [英] How can I reverse the order of a <ul> with the click of a button?

问题描述

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

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

您可以在这里看到实时代码：
http://designers.watch/tester.html

当您点击'Reverse Order'按钮时，您会看到不良效果。

我使用相反的代码< ; 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> ）; 
}）; //每个
}）; //函数
}）; //准备好
  

这两个问题是：

• 样式变得混乱。 b $ b
• 懒加载程序不会加载从反向排序带到列表顶部的图像。

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

感谢任何帮助你的人。

方案

你的逆序不会颠倒你的 li ，它正在创造新的，新的与旧的不同 - 他们缺少项目类，并且您正在丢失模式属性。这应该会改善你已经拥有的功能：

  $（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颠倒子元素的顺序

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

I've been trying to use jQuery to have a button function reverse the order of a <ul>.

For some reason the code completely messes up with the styling of the ul when clicked. It might be because of the lazy loader I'm using for the images (qazy.js), but I'm not entirely sure. It just seems to break the <ul>.

You can see the live code here: http://designers.watch/tester.html

You'll see the undesirable effect when you click the 'Reverse Order' button.

The code I use the reverse the <ul> is:

$(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

The two issues are:

• The styles get messed up.
• The lazy loader won't load the images that have been brought to the top of the list from the reverse ordering.

Is there a way that I can fix these issues? Should I use a different lazy loader script?

Thanks in advance to anyone who helps out.

解决方案

Your "Reverse Order" doesn't reverse your li's, it is creating new ones and those new ones are different than those old ones - they are missing item class plus you are loosing your schema attributes. This should do the trick in terms of improving what you already have:

$(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

Check this question for more info about reordering list items: jQuery reversing the order of child elements

Lazy loader is a bigger problem, and I think it would need to be reinitialized after you do the reverese, since your list items and their children are new and don't have lazy loader events attached by the script. If you do reordering right this problem may disappear.

这篇关于我该如何反转< ul>的顺序？点击一个按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！