您的位置：首页 > 其它

ul li列表排序

2015-09-01 11:18 183 查看

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

效果：

排序前：

排序后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航