是否需要将网页元素进行倒序,使用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