jQuery插件ReverseOrder实现Javascript倒序及了解prependTo函数

是否需要将网页元素进行倒序，使用jQuery插件ReverseOrder可以实现此功能，ReverseOrder插件可以将HTML元素，如<p>，<li>等任意元素进行重新倒序排列，效果图如下：



使用说明

需要使用jQuery库文件和ReverseOrder库文件

使用实例

一，包含文件部分

<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.reverseorder.js"></script>

二，HTML部分

<ul id="checkboxes">
<li class="item"><label><input type="checkbox" /> item 1</label></li>
<li class="item"><label><input type="checkbox" /> item 2</label></li>
<li class="item"><label><input type="checkbox" /> item 3</label></li>
<li class="item"><label><input type="checkbox" /> item 4</label></li>
</ul>
<p><input type="button" id="checkboxToggle" value="倒序" /></p>

三，Javascript部分

$('#checkboxToggle').click(function(){
$('#checkboxes .item').reverseOrder();
});

当点击ID为checkboxToggle的按钮时实现对ID为checkboxes的ul元素内类名为item进行倒序，使用reverseOrder插件非常简单，只需指定需要重新排序的元素即可。

其实reverseOrder插件的倒序原理非常简单，全部JS库代码如下：

(function($) {
$.fn.reverseOrder = function() {
return this.each(function() {
$(this).prependTo( $(this).parent() );
});
};
})(jQuery);

prependTo(content)函数说明

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

reverseOrder是一个非常小的插件，这是我见过最小的插件，虽然简单但却实现了一个把元素倒序的功能。

本文链接地址：http://www.biuuu.com/p885.html