ul li列表排序

有这样的需求,就是对 li 列表进行排序,刚开始觉得木有什么头绪,就想起以前好像Array.prototype.sort.call可以这样做,可以实现对象的排序,比如
ul li列表排序_第1张图片

那么对于一个dom列表,怎么做呢。下面有一个JS原生版本的。

DOM结构

        <ul class="datalist">
            <li class="item">
                <span class="item-id">1span>
                <span class="item-name">AA_90span>
                <span class="item-count">90span>
            li>
            <li class="item">
                <span class="item-id">2span>
                <span class="item-name">AA_52span>
                <span class="item-count">52span>
            li>
            <li class="item">
                <span class="item-id">3span>
                <span class="item-name">AA_57span>
                <span class="item-count">57span>
            li>
            <li class="item">
                <span class="item-id">4span>
                <span class="item-name">AA_36span>
                <span class="item-count">36span>
            li>
        ul>

JS代码:

    /**
    * 对list排序
    * @param {boolean} flag     [正逆序标记]
    * @param {JQ dom} $domlist     [参与排序的列表]
    * @return {JQ dom}      [返回重新排序过的列表]
    */
    var sortDom = function(flag,$domlist){
        var $item = $domlist.find('.item');
        var $newList = Array.prototype.sort.call($item,function(a,b){
            return flag ? ($(a).find('.item-count').html()-0) - ($(b).find('.item-count').html()-0) : ($(b).find('.item-count').html()-0) - ($(a).find('.item-count').html()-0)
        });
        return $newList;
    }

调用

    $('#sort-btn').click(function(){
        var $domlist = $('.datalist');
        var $result = sortDom(true,$domlist);
        $('.datalist').html($result);
    });

效果:

排序前:

ul li列表排序_第2张图片

排序后:

ul li列表排序_第3张图片

你可能感兴趣的:(javascript)