ul li列表排序

以你之姓@ 2022-10-16 09:59 237阅读 0赞

在一个列表中，每一项都有多个数据，像这样

<ul class="datalist">
    			<li class="item">
    				<span class="item-id">1</span>
    				<span class="item-name">AA</span>
    				<span class="item-count">90</span>
    			</li>
    			<li class="item">
    				<span class="item-id">2</span>
    				<span class="item-name">BB</span>
    				<span class="item-count">52</span>
    			</li>
    			<li class="item">
    				<span class="item-id">3</span>
    				<span class="item-name">CC</span>
    				<span class="item-count">57</span>
    			</li>
    			<li class="item">
    				<span class="item-id">4</span>
    				<span class="item-name">DD</span>
    				<span class="item-count">36</span>
    			</li>
    		</ul>

要想按照.item-count中包含的数据对 li 进行升序、降序排序，可以使用\*\*Array.prototype.sort()\*\*来对列表进行排序：

var $domlist = $('.datalist');//将要排序的列表
    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; //返回重新排序过的列表
    }
    var $result = sortDom(true,$domlist);//true为升序、false为降序
    $('.datalist').html($result);

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中ul,li{}； ul li{}； ul＞li{}有何区别

![a09384c31d2f3403435ddb8d7e617445.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 16:32/ 0 赞/ 100 阅读

相关使用jQuery为无序列表（ul）中的列表项（li）添加背景颜色

要在使用jQuery编写的网页中为无序列表中的列表项添加背景颜色，您可以按照以下步骤进行操作：步骤 1：引入jQuery库首先，在您的HTML文件中引入jQuery库

怼烎@/ 2024年03月01日 03:36/ 0 赞/ 38 阅读

相关 jquery实现ul列表中点击li选择radio

> 如何利用jquery实现ul列表中点击li选择radio呢？目录 1、HTML代码 2、JS代码 3、效果预览 --------------------

柔光的暖阳◎/ 2023年09月29日 15:59/ 0 赞/ 4 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 238 阅读

相关遍历 ul li

<pre name="code" class="javascript">//遍历当前用户 function foreachAuthor(data

快来打我*/ 2022年09月21日 13:24/ 0 赞/ 141 阅读

相关 23、DOM的高级应用-------关于Ul中的 li 的排序

1、排序 • 移动Li • 元素排序：转换——排序——插入 //父节点.appendChild()的实现，会把这个元素节点从ul

心已赠人/ 2022年09月21日 04:58/ 0 赞/ 73 阅读

相关 html中ul li前面小黑点样式 ul li一些样式

对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。 1、在CSS中写

爱被打了一巴掌/ 2022年07月19日 05:11/ 0 赞/ 325 阅读

相关 ul列表解决最后一个li标签的margin问题

原文地址：[http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html][http_www.

雨点打透心脏的1/2处/ 2022年06月10日 08:59/ 0 赞/ 206 阅读

相关 html中去除ul,ol,li标签的样式列表排序点

![70][] 在ol,ul,li标签样式中添加list-style:none; 部分教学添加padding: 0px; margin: 0px;就可以使用，但

心已赠人/ 2022年05月28日 02:56/ 0 赞/ 212 阅读

相关 HTML 列表中的dl,dt,dd,ul,ol,li区别及应用

1.无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（通常）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。 2.有序列表有序列表也是

以你之姓@/ 2022年01月22日 12:03/ 0 赞/ 262 阅读