如何移动列表 [英] How to move lists

问题描述

我有这样的事情：

 < ul> 
< li id =li1> 1< / li> 
< li id =li2> 2< / li> 
< li id =li3> 3< / li> 
< / ul> 
  

我想知道是否有可能将列表编号3移动到列表编号的位置1使用javascript或jquery，如下所示：

 < ul> 
< li id =li3> 3< / li> 
< li id =li2> 2< / li> 
< li id =li1> 1< / li> 
< / ul> 
  

感谢您的支持！

解决方案

没有jQuery解决方案：

  var list = document.getElementsByTagName（'ul'）[0 ]，
 items = list.getElementsByTagName（'li'），
i = items.length; 
 while（i--）list.appendChild（items [i]）; 
  

下面是一个演示： http://jsfiddle.net/wared/tJaJ9/ 。

---

基于cookie怪物的建议：

  var list = document.getElementsByTagName（'ul'）[0]，
i = list.children.length; 
 while（i--）list.appendChild（list.children [i]）; 
  

---

只是为了好玩：

  var list = document.getElementsByTagName（'ul'）[0]，
 items = Array.prototype.slice.call（list.children ）; 
 while（items.length）list.appendChild（items.pop（））; 
  

---

jQuery之一：

  $（'ul'）。append（$（'li'）。get（）。reverse（））; 
  

I have something like this:

<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>

And I wonder if there is possible to move the list number 3, to the place of the list number 1 using javascript or jquery, like this:

<ul>
<li id="li3">3</li>
<li id="li2">2</li>
<li id="li1">1</li>
</ul>

Thanks for you time!

解决方案

No jQuery solution :

var list = document.getElementsByTagName('ul')[0],
    items = list.getElementsByTagName('li'),
    i = items.length;
while (i--) list.appendChild(items[i]);

Here is a demo : http://jsfiddle.net/wared/tJaJ9/.

---

Based on cookie monster's suggestion :

var list = document.getElementsByTagName('ul')[0],
    i = list.children.length;
while (i--) list.appendChild(list.children[i]);

---

Just for fun :

var list = document.getElementsByTagName('ul')[0],
    items = Array.prototype.slice.call(list.children);
while (items.length) list.appendChild(items.pop());

---

A jQuery one :

$('ul').append($('li').get().reverse());

这篇关于如何移动列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！