Javascript JQuery切换表单上的选项顺序

我有一个表单，我需要在其中切换选项的顺序。我需要在页面加载后有条件地（不是每次）执行此操作，使用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>

$25


$50


$100

我希望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>

$100


$50


$25

在本例中有三个选项，但可以是1到7之间的任意数字

有人能找到一个好方法吗？

我会做一个

$。each（）

要获取

ol

中的元素，请颠倒顺序，然后使用

$.html（）

重写ol

有关此示例，请参见。

这应该可以做到：

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

请参见一个工作示例：

---

这应该相当简单。我将使用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*/

通过这种方式，您可以根据需要对它们重新排序，而不仅仅是颠倒顺序。

使用jquery：

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

看

但使用纯javascript方法更快，因为：

---

ObjetNode.insertBefore（NewNode，NodePosition）

工作起来很有魅力。谢谢你的小提琴。