jquery简单的数字列表排序代码



403 1609 537



特效描述:数字列表排序,jquery列表排序小插件,能实现从大到小和从小到大排序

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/rank.css"/>

2. 引入JS

<script src="js/jquery-2.2.3.min.js"></script>

3. HTML代码

    <ul>
        <li>4</li>
        <li>7</li>
        <li>9</li>
        <li>2</li>
        <li>1</li>
        <li>5</li>
        <li>6</li>
        <li>8</li>
        <li>3</li>
        <li>3</li>
    </ul>
    <div>
        <button>从小到大</button><button>取消排序</button><button>从大到小</button>
    </div>
    <script>
        var color = ['#ffcc66' , '#ffcccc' , '#cccc33' , '#cccccc' , '#999933' , '#9999cc' , '#663333' , '#6666cc' , '#FF6A6A' , '#009966'];
        var initList = [], domArr = [];
        $('li').each(function(a){
            $(this).css('background' , color[a]);
            $(this).attr('title' , '原位置为:'+(a+1));
            initList[a] = $(this).html();
        })
        /*
        从小到大排序
         */
        function smallToBig(){
            getDom();
            $.each(domArr , function(i){
                $.each(domArr , function(j){
                    if( domArr[i].html() < domArr[j].html()){
                        mid = domArr[j]; domArr[j] = domArr[i]; domArr[i] = mid;
                    }
                })
            })
            appendDom();
        }
        /*
         取消排序
         */
        function cancleRank(){
            getDom();
            $.each(initList,function(b){
                $.each(domArr,function(c){
                    if(domArr[c].html() == initList[b]){
                        $('ul').append(domArr[c]);
                    }
                })
            })
        }
        /*
         从大到小排序
         */
        function bigToSmall(){
            getDom();
            $.each(domArr , function(i){
                $.each(domArr , function(j){
                    if( domArr[i].html() > domArr[j].html()){
                        mid = domArr[j]; domArr[j] = domArr[i]; domArr[i] = mid;
                    }
                })
            })
            appendDom()
        }
        /*
        取出所有li放进数组
         */
        function getDom(){
            $('li').each(function( m ){
                domArr[m] = $(this);
            })
        }
        /*
        将数组中的li插入ul(原ul中的li自动删除。DOM元素的特性。)
         */
        function appendDom(){
            $.each( domArr, function(d){
                $('ul').append( domArr[d] );
            })
        }
        var funSum = [ smallToBig , cancleRank , bigToSmall];
        $('button').click(function(){
            var fun = funSum[$(this).index()]
            fun();
        })
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 图片文字 文字导航菜单 切换按钮 表单 文字 文字列表 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到