连续点击正反排序数字

<span class="paixu" mode="0" style="display:inline-block;padding:5px 10px;cursor: pointer;background:red;color:#fff;">排序</span>
<ul id="list">
    <li><span>数值是:</span><span class="orderid">108</span></li>
    <li><span>数值是:</span><span class="orderid">101</span></li>
    <li><span>数值是:</span><span class="orderid">17</span></li>
    <li><span>数值是:</span><span class="orderid">253</span></li>
    <li><span>数值是:</span><span class="orderid">115</span></li>
    <li><span>数值是:</span><span class="orderid">524</span></li>
    <li><span>数值是:</span><span class="orderid">98</span></li>
    <li><span>数值是:</span><span class="orderid">198</span></li>
    <li><span>数值是:</span><span class="orderid">56</span></li>
    <li><span>数值是:</span><span class="orderid">48</span></li>
</ul>
<script type="text/javascript">
    $(function() {
        //1即DESC从大到小,0即ASC从小到大
        $(".paixu").click(function() {
            var orderIdArray = [];
            var idIndex = [];
            var mode = $(this).attr("mode");
            var orderid = $(".orderid");

            orderid.each(function(i) {
                var id = parseInt($(this).html());
                idIndex[id] = i;        //orderid的序号
                orderIdArray.push(id);  //orderid的值
            });

            if(mode == 1)
            {
                $(this).attr("mode", 0);
                $(this).html("从大到小排序");
                orderIdArray = orderIdArray.sort(function(a, b){return (a < b) ? 1 : -1}); //从大到小排序
            }
            else if(mode == 0)
            {
                $(this).attr("mode", 1);
                $(this).html("从小到大排序");
                orderIdArray = orderIdArray.sort(function(a, b){return (a > b) ? 1 : -1}); //从小到大排序
            }

            //alert(orderIdArray+", "+idIndex);

            var list = $("#list").find("li");
            var _length = orderIdArray.length;

            for (var i=0; i<_length; i++)
            {
                $("#list").append(list.eq(idIndex[orderIdArray[i]]));
            }
        });
    });
</script>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值