向 li 元素添加自动增量值

2024-01-10

我是一名 css/设计师,所以请原谅我不了解任何 .js

基本上我想知道如何使用 javascript / jquery 将自动增量 id 添加到列表项中,以获取我试图添加一些 css 的内容。

before

<li id=""><a href="">Item number 1</a></li>
<li id=""><a href="">Item number 2</a></li>
<li id=""><a href="">Item number 3</a></li>

after

<li id="1"><a href="">Item number 1</a></li>
<li id="2"><a href="">Item number 2</a></li>
<li id="3"><a href="">Item number 3</a></li>

预先感谢,尤其是阅读本文

尝试了所有的响应,除了 ul/li 项目之外,没有任何内容在纯 html 页面上起作用。

感谢所有的尝试,我在很大程度上失败了......我不是一个程序员


我要给你li标签包含ulid如果还有其他li页面上您不想排序的标签,但在 jQuery 中这很容易:

<ul id="ordered">
    <li><a href="">Item number 1</a></li>
    <li><a href="">Item number 2</a></li>
    <li><a href="">Item number 3</a></li>
</ul>

您只需使用each method:

$('#ordered li').each(function(i,el){
    el.id = i+1;
});

我建议使用除普通整数以外的其他 id 来表示,所以也许类似'ordered' + (i+1)而不仅仅是i+1 above.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

向 li 元素添加自动增量值 的相关文章

  • 在Javascript中按降序对字符串进行排序(最有效)?

    W3Schools 有这个例子 var fruits Banana Orange Apple Mango fruits sort fruits reverse 这是在 Javascript 中按降序对字符串进行排序的最有效方法吗 Updat
  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接?

    是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐

  • Kubernetes:ERR_NAME_NOT_RESOLVED

    我已经在 GKE 中部署了 mongo db Spring Boot BE Angular 应用程序 我的 FE 服务是一个负载均衡器 它需要与我的 BE 连接才能获取数据 但我在浏览器中收到控制台错误 GET http contactbe
  • 角度获取过滤后的 ng-repeat 的长度

    我已从 Angular 1 0 8 升级到 Angular 1 2 9 以帮助提高我的应用程序的性能 我引入了轨道 通过它提高了速度 我曾经拥有的 div class result row div
  • 将字符串中的子字符串大写

    我正在尝试创建类似的东西 string How do you do today substring o gt gt gt hOw dO yOu dO tOday 我已经编写了其余的代码 提示输入字符串等 我只是坚持必须将字符串中的子字符串大
  • WPF 动画警告:6:无法执行操作

    我在 VIsual Studio 输出面板中的 WPF 应用程序中观察到警告 其中包含以下文本 WPF 动画警告 6 无法执行操作 因为 指定的 Storyboard 从未应用于此对象以进行交互 control Action 停止 Stor
  • R 交互选择数据框的行

    我有一个数据框 说 df lt data frame a 1 10 b runif 10 我希望能够向用户显示数据框并让他们选择 单击 一行 然后检索该行 有点像edit df 除了我想要的要简单得多 因为我不需要编辑功能 我只需要侦听其中
  • PHP 允许的 zip mime 类型

    我知道 从这个问题的答案来看 rar zip 文件 MIME 类型 https stackoverflow com questions 6977544 rar zip files mime type 大多数人在 PHP 中检查 zip 文件
  • 在 Bigquery 中 - 如何从 Firebase 事件表查询昨天数据和过去 7 天的数据

    我使用下面的查询来获取指定数据范围的数据 SELECT event date count event name as APP Installs FROM table events WHERE TABLE SUFFIX BETWEEN 201
  • 我应该使用哪种 JDBC 驱动程序类型来访问 Oracle 数据库?

    我们正在 AIX 上的 Tomcat Web 服务器内运行 J2EE 应用程序 我们需要访问 Oracle 数据库的一些视图和存储过程 这个oracle数据库不是我们的应用程序所基于的数据库 而是我们必须与之通信的外部系统 据我现在所知 在
  • 如何将 React 组件渲染为函数返回

    我试图将 React Native 组件渲染为函数返回 但没有成功 代码如下 In App js in a new project import as React from react import View Text TouchableO
  • php命令行选项解析,如何

    我在 PHP 5 2 中使用 Console Getopt 并惊讶地发现它与其他语言 perl bash java 中的 getopt 有何不同 谁能建议如何解析返回的数组 opts 中的参数 php myprog php a varA c
  • opencv如何填充空心线

    I have an image like this after I applied some processings e g cv2 Canny it looks like this now 正如您所看到的 黑线变得空心 我尝试过腐蚀和膨胀
  • python模拟函数未调用

    我正在测试 python 代码 一个 django 3 0 5 项目 尽管我认为它不相关 但我无法调用我的模拟对象的函数 这是我的代码 myproject mypackage myhelpers def get dict return di
  • 当变量等于x时触发事件 - python

    我有以下脚本 每次按下按钮时都会增加计数器 当计数器达到某个数字 即 10 时 可以说我想要触发一个事件 from RPi import GPIO from time import sleep clk 25 dt 8 GPIO setmod
  • 无法从 RecyclerView.OnScrollListener 调用 notificationItemInserted()

    最近我升级了我的recyclerview v7 23 to recyclerview v7 24 2 0 我的应用程序有一个无限滚动列表 错误消息指向该行notifyItemInserted当我将加载视图添加到RecyclerView 空对
  • 将数据追加到 localStorage 对象

    我正在尝试将新对象添加到当前的 localStorage 对象 但没有成功 最后 我得到的不是 localStorage 中的两组数据 而是最后一组数据 对我做错了什么有任何见解吗 谢谢 这就是我想做的 add the first stud
  • Electron - node.js - ng :无法加载文件路径\ng.ps1,因为在此系统上禁用了运行脚本

    我正在尝试编译一个项目Windows 10 in Visual Studio Code 我的设置如下 1 npm版本6 12 2 Node js版本12 13 3 Angular CLI 8 3 19 我遇到的问题是当我尝试运行时ng se
  • Spring MVC 覆盖接收到的内容类型

    我正在开发 Spring MVC 应用程序 并且有一个我无法控制的客户端 该客户端正在 POST JSON 数据 但传输application x www form urlencoded标头 Spring 自然信任此标头并尝试接收数据 但由
  • AMD:javascript 上下文的目的是什么?

    关于AMD 异步模块定义 我读到的阶段是这样的 AMD 格式来自于想要一种比 今天的 编写一堆带有隐式依赖关系的脚本标签 你必须手动订购 和一些易于使用的东西 直接在浏览器中 javascript 上下文的目的是什么 你能举个例子吗 使用
  • SQLiteDiskIOException:创建数据库时磁盘 I/O 错误

    我正在使用以下代码在 android 中创建数据库 public class PackageDBHelper extends SQLiteOpenHelper The Android s default system path of you
  • 向 li 元素添加自动增量值

    我是一名 css 设计师 所以请原谅我不了解任何 js 基本上我想知道如何使用 javascript jquery 将自动增量 id 添加到列表项中 以获取我试图添加一些 css 的内容 before li a href Item numb