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