ul li列表排序

最新推荐文章于 2024-04-19 12:54:59 发布
最新推荐文章于 2024-04-19 12:54:59 发布
阅读量6.8k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： dom排序 li排序 对象排序 JS排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csr0312/article/details/48155633
版权

有这样的需求，就是对 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>
最低0.47元/天 解锁文章
leesren
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DOM的高级应用-------关于Ul中的 li 的排序
luozc_web的博客
05-20 775
1、排序 • 移动Li • 元素排序：转换——排序——插入 //父节点.appendChild()的实现，会把这个元素节点从ul里面删除，然后在加入。2、排序的实现代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM中的UL的排
li标签横向排列_<bdi> | HTML5 双向隔离标签
weixin_42350514的博客
01-20 138
元素用于隔离文本的一小部分，该文本的格式可设置成与周围的文本方向相反。当具有从右到左方向性的语言(例如阿拉伯语或希伯来语)与左到右语言内联使用时，此功能很有用。双向文本是既可以包含从左到右(LTR)排列的字符序列又可以从右到左(RTL)排列的字符序列的文本。浏览器通过Unicode双向算法来处理此问题。在此算法中，字符被赋予了隐式的方向性：例如，拉丁字符被视为LTR，而阿拉伯字符被视为R...
CSS入门：ol，ul列表用法详解（附案例）
最新发布
u013179804的博客
04-19 2228
无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。
通过ul li遍历出来的图片，高度不一致，导致图片错位的解决方案
qq_32908349的博客
04-15 1673
通过ul li遍历出来的图片，高度不一致，导致图片错位的解决方案 编号为1的容器，高度大于其他三个容器，导致3、4错位 vue <div class="content" > <ul> <li v-for="item of list" :key="item.id" > <img class="img-content" :src="...
前端应该掌握的CSS实现多列等高布局
weixin_30699235的博客
06-05 105
1、引言 我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就会导致每个栏目的底部是对不齐的，用户体验不是很好！ 实际的问题效果如下所示： 2、需求如下 我们要实现的效果就是不管每个栏目的实际内容多少，都要保证每个栏目是对齐的。 3、如何解决 HTML代码如下所示： ...
在html中使li左右排列
weixin_35752645的博客
12-30 1514
在 HTML 中使用 li 左右排列，你需要使用 CSS 来设置。 首先，你需要在 HTML 中给你的列表元素(ul 或 ol)设置一个类名或 id，然后在 CSS 中使用这个类名或 id 来选择该列表元素。 例如，假设你的列表元素是一个 ul，并且你给它设置了一个类名为 "my-list"，那么你可以在 CSS 中使用以下代码来设置 li 元素的排列方式： .my-list li { dis...
列表排序
Mithrandir_的博客
08-03 460
''' 冒泡排序 临近的数字两两进行比较,按照从小到大（从大到小）的顺序进行交换 ''' def bubbleSort(arr): for i in range(1, len(arr)): for j in range(len(arr) - i): if arr[j] &lt; arr[j + 1]: arr[j], arr[j + 1] = arr[j ...
JQuery中两个ul标签的li互相移动实现方法
10-24
这是一个常见的需求，特别是在构建交互式的用户界面时，例如拖放功能或列表排序。下面我们将详细解析示例代码，了解其实现原理。 首先，我们创建了两个无序列表（`<ul>`）元素，分别用`id`为"leftUL"和"rightUL...
jquery产品图片列表排序代码
01-23
在HTML中，通常会用`<ul>`或`<ol>`标签来创建一个列表，每个图片作为列表项`<li>`，图片嵌入在`<img>`标签内。例如： ```html <ul id="product-images"> <li>产品1"></li> <li>产品2"></li> <li>产品3"></li> ...
列表li上下交换位置动画
10-27
本主题聚焦于一个特定的应用场景——"列表li上下交换位置动画"，这是一种常见于网页交互设计中的功能，特别是对于数据列表、菜单或者评分系统等元素的排序。下面将详细阐述这一知识点及其相关实现方法。 首先，我们...
jQuery列表排序从小到大特效代码
03-20
在本文中，我们将深入探讨如何使用jQuery实现列表排序功能，特别是从小到大和从大到小的排序特效。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在jQuery中实现...
js实现列表按字母排序|angluo-javascript-332677.pdf
10-14
- `while (switching)` 循环会在满足条件时继续执行，直到列表排序完成。 - `getElementsByTagName("li")` 用于获取所有列表项（`<li>`）元素，并存储在`li`数组中。 - 遍历`li`数组，比较相邻两个元素的文本内容...
li 多列等高的几种实现
weixin_42371145的博客
05-08 454
什么是多列等高 简单的说，就是多个列，但是所有列的高度都希望以最高的那个列为准。 如下图，每个列的高度都靠里面的内容撑起来。 但是有些情况我们需要每个列能与最高的那个列等齐。如下图： 实现 利用 padding、margin 来实现 table 布局实现 flex 布局实现 来直接看看测试代码吧，可以直接复制代码，查看结果 <!DOCTYPE html> <html lang...
ul(有序列表)可以排序？
前端学习笔记
02-19 2149
ul(有序列表)可以排序? 最近在看css设计指南，里面有这样一句话，li是一个列表项，它只有在ol (有序列表)和ul(无序列表)这两种列表标签中才有用 有序列表？？? 莫非可以根据value值排序？ 为了验证我的猜想，写了一个demo验证，特此记录一下。 <!DOCTYPE html> <html> <head> </head> <b...
图文详解如何让ul中的li元素横向排列（附代码）
热门推荐
lin123_00的博客
05-11 3万+
在页面布局时，我们经常会用到li标签，因为li标签用途很广泛，它可以用来制作列表，选项卡，导航等等。但是<ul>标签里的li默认情况下是纵向排列的，那我们可不可以让li横向排列呢？这篇文章就给大家介绍两种方法，来实现HTML中ul列表横向排列。有需要的朋友可以参考一下，希望对你有用。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） ul列表的横向排列在导航中用得比较多，接下来就通过横向导航实例来讲讲如何用CSS让ul横向排列。 注意： 1、li
html ul li纵向排列,CSS实现ul和li横向排列的两种方法
weixin_36339234的博客
05-30 6411
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高display:inline-block即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加...
一个ul列表 帮我用js写一个拖动li排序
05-26
好的，以下是一个基于原生JavaScript的示例代码： HTML代码： ```html <ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> ``` JavaScript代码： ```javascript // 获取可排序的ul元素 const sortable = document.getElementById('sortable'); // 获取所有li元素 const items = sortable.querySelectorAll('li'); // 定义拖拽开始时的位置 let startPosition; // 遍历所有li元素 items.forEach(item => { // 添加拖拽事件监听器 item.addEventListener('dragstart', dragStart); item.addEventListener('dragover', dragOver); item.addEventListener('drop', drop); }); // 拖拽开始时保存当前位置 function dragStart(event) { startPosition = event.currentTarget; event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/html', this.innerHTML); } // 阻止默认事件并允许拖拽 function dragOver(event) { event.preventDefault(); event.dataTransfer.dropEffect = 'move'; } // 在新位置释放拖拽元素，并重新排列li元素的顺序 function drop(event) { event.preventDefault(); // 获取当前位置和目的位置的元素 const endPosition = event.currentTarget; const startOrder = parseInt(startPosition.getAttribute('data-order')); const endOrder = parseInt(endPosition.getAttribute('data-order')); // 如果当前位置在目的位置之前，则在目的位置之前插入元素 if (startOrder < endOrder) { endPosition.parentNode.insertBefore(startPosition, endPosition.nextSibling); } // 如果当前位置在目的位置之后，则在目的位置之后插入元素 else { endPosition.parentNode.insertBefore(startPosition, endPosition); } // 重新设置li元素的顺序 resetOrder(); } // 重新设置li元素的顺序 function resetOrder() { const items = sortable.querySelectorAll('li'); items.forEach((item, index) => { item.setAttribute('data-order', index); }); } ``` 通过以上代码，你可以实现一个可排序的ul列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值