ul li列表排序

来源：互联网发布：淘宝情趣用品专卖店编辑：程序博客网时间：2024/05/17 02:18

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

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

DOM结构

        <ul class="datalist">            <li class="item">                <span class="item-id">1</span>                <span class="item-name">AA_90</span>                <span class="item-count">90</span>            </li>            <li class="item">                <span class="item-id">2</span>                <span class="item-name">AA_52</span>                <span class="item-count">52</span>            </li>            <li class="item">                <span class="item-id">3</span>                <span class="item-name">AA_57</span>                <span class="item-count">57</span>            </li>            <li class="item">                <span class="item-id">4</span>                <span class="item-name">AA_36</span>                <span class="item-count">36</span>            </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);    });

效果：

排序前：

这里写图片描述

排序后：

这里写图片描述

0 0