一次更改多个列表的顺序

时间:2014-04-18 10:30:12

标签: jquery html list

如何更改两个列表的顺序,同时防止混淆。我知道怎么用一个列表来做,但是当我得到几个时就会卡住..

Fiddle

HTML:

<ul>
    <li>A</li>
    <li>B</li>
</ul>
<ul>
    <li>C</li>
    <li>D</li>
</ul>
<a href="#" class="switch_order">Switch</a>

的jQuery

$('body').on('click', '.switch_order', function(e){
  var list = $('ul');
  var listItems = list.children('li');
  list.append(listItems.get().reverse());
});

3 个答案:

答案 0 :(得分:1)

$('body').on('click', '.switch_order', function(e){
 $('ul').each(function(){
  var listItems = $(this).children('li');
  $(this).append(listItems.get().reverse());
 });
});

Updated JSFiddle

答案 1 :(得分:1)

您可以使用:

$('body').on('click', '.switch_order', function(e){
    $('ul li').each(function(i,li){
        $(this).parent().prepend(li);
    })
});

<强> Fiddle Demo

答案 2 :(得分:0)

This is one way

All I did here was give an id to each <ul> and targeted them seperately