我有一个表单,我需要切换选项的顺序。我需要在页面加载后有条件地(不是每次)执行此操作,并且使用 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 之间的任何数字。
谁能看到做到这一点的好方法?
这应该可以做到:
$(".choices-group").html($(".choice").get().reverse());
查看工作示例:
http://jsfiddle.net/epignosisx/bX3Kf/
这应该相当简单。我会使用 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*/
这样,您可以根据需要对它们重新排序,而不仅仅是颠倒顺序。
我会做一个$.each()
来获取ol
中的元素,颠倒顺序,然后使用$.html()
重写 ol
有关这方面的示例,请参阅此处的 jquery 手册。
使用 jquery:
$('.choices-group li').each(function(){
$(this).parent().prepend(this);
});
见 jsFiddle
但更快的是使用纯javascript方法,如:ObjetNode.insertBefore(NewNode,NodePosition);