ul li列表排序

最新推荐文章于 2021-01-20 10:19:48 发布

原创最新推荐文章于 2021-01-20 10:19:48 发布 · 6.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dom排序 #li排序 #对象排序 #JS排序

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何利用JavaScript的Array.prototype.sort.call方法对DOM中的li元素进行排序。通过示例代码展示了如何实现这一功能，从而实现li列表的排序，从排序前后对比中可以看出方法的有效性。

有这样的需求，就是对 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);
    });