jquery根据编号排序列表

原创 Dale111 随笔 jquery 307阅读 2017-06-23 17:53:48 举报

通过在input框中输入数值点击排序,使每一行的顺序由小到大进行排列

<ul id="list">
<li><span><input value="1" type="text"/></span>我是mmm</li>
<li><span><input value="2" type="text"/></span>我是第hhhh</li>
<li><span><input value="3" type="text"/></span>我是第ffff</li>
<li><span><input value="4" type="text"/></span>我是第eeee</li>
<li><span><input value="3" type="text"/></span>我是第ggg</li>
</ul>
<button id="sort">排序</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>;
<script type="text/javascript">
$(function() {
$("#sort").click(function() {
var orderIdArray = [];
var idIndex = [];

        $("input").each(function(i) {
            var value = $(this).val(); 
            idIndex[value] = i;        //orderid的序号
            orderIdArray.push(value);  //orderid的值
        });

                    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>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复