2

我有一个表单,我需要切换选项的顺序。我需要在页面加载后有条件地(不是每次)都这样做,并且使用 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 之间的任何数字。

任何人都可以看到这样做的好方法吗?

4

4 回答 4

3

这应该这样做:

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

查看一个工作示例:

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

于 2012-10-15T15:26:36.300 回答
1

使用 jquery:

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

jsFiddle

但更快的是使用纯javascript方法: ObjetNode.insertBefore(NewNode,NodePosition);

于 2012-10-15T19:45:12.517 回答
1

我会做一个$.each()来获取 中的元素ol,颠倒顺序然后使用$.html()来重写 ol

请参阅此处的 jquery 手册以获取此示例。

于 2012-10-15T15:21:50.047 回答
1

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

这样,您可以根据需要对它们重新排序,而不仅仅是颠倒顺序。

于 2012-10-15T15:26:51.590 回答