JQuery切换表单上的选项顺序

Question

我有一个表单，我需要切换选项的顺序。我需要在页面加载后有条件地（不是每次）做它，它是有道理的使用jQuery为此任务。

这里的HTML，因为它最初呈现：

<ol class="choices-group"> 
    <li class="choice"> 
    <label for="first"> 
     <input id="first" type="radio" value="25.0">$25</input> 
    </label> 
    </li> 
    <li class="choice"> 
    <label for="second"> 
     <input id="second" type="radio" value="50.0">$50</input> 
    </label> 
    </li> 
    <li class="choice"> 
    <label for="third"> 
     <input id="third" type="radio" value="100.0">$100</input> 
    </label> 
    </li> 
</ol> 

我想jQuery的扭转元素的顺序，所以它看起来是这样的：

<ol class="choices-group"> 
    <li class="choice"> 
    <label for="third"> 
     <input id="third" type="radio" value="100.0">$100</input> 
    </label> 
    </li> 
    <li class="choice"> 
    <label for="second"> 
     <input id="second" type="radio" value="50.0">$50</input> 
    </label> 
    </li> 
    <li class="choice"> 
    <label for="first"> 
     <input id="first" type="radio" value="25.0">$25</input> 
    </label> 
    </li> 
</ol> 

在这个例子中，有三个选项，但它可能是1到7之间的任何数字。

任何人都可以看到一个很好的方法来做到这一点吗？

Answer 1

这应做到：

$(".choices-group").html($(".choice").get().reverse()); 

看到一个工作示例：

http://jsfiddle.net/epignosisx/bX3Kf/

Answer 2

我会做一个$.each()得到的ol的元素，然后颠倒的顺序使用$.html()改写OL

请参阅jquery manual here对于这样的一个例子。

Answer 3

这应该是相当简单。我将使用Javascript对象来帮助管理它，其中关键部分（属性名称）是用于评估条件的值，值是对DOM的引用。然后，您只需按照正确的顺序将它们追加到ol。

var temp = {}; 
$.each('ol li', function(k, v){ 
    var $this = $(v); 
    temp[$this.attr('someAttribute')] = $this; 
}); 

/*some sorting logic and appending them back*/ 

这样，您可以对其进行重新排序，而不仅仅是颠倒顺序。

Answer 4

使用jQuery：

$('.choices-group li').each(function(){ 
    $(this).parent().prepend(this);  
});​​​​​​ 

参见jsFiddle

但是更快将是使用纯JavaScript方法为： ObjetNode.insertBefore（NewNode，NodePosition）;