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

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

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

使用实例
一，包含文件部分

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

二，HTML部分

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

三，Javascript部分

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

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

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

1. (function($) {
2. $.fn.reverseOrder = function() {
3. return this.each(function() {
4. $(this).prependTo( $(this).parent() );
5. });
6. };
7. })(jQuery);

prependTo(content)函数说明

把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

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

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