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对象来帮助管理它，其中key-part（属性名称）是用于评估条件的值，value是对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）;

JQuery在表单上切换选项顺序

4 个答案: