jquery获取当前点击li的元素的节点下标

最新推荐文章于 2021-11-24 16:51:15 发布
原创 最新推荐文章于 2021-11-24 16:51:15 发布 · 3.7w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用jQuery实现的列表项点击切换高亮样式的简单示例。通过为被点击的列表项添加激活类并移除其他列表项上的激活类来实现视觉上的切换效果。此外，还展示了如何获取被点击列表项的索引。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

	$("#detailChange").on("click","li",function(){
		// 切换li列表样式
		$(this).addClass("active");
		$(this).siblings().removeClass("active");
		// 获取当前点击li 的下标
		let index = $(this).index() + 1;
		console.log(index);
	});

jQuery选择元素下标以及通过元素下标获得dom
圆圆的 JavaScript 博客
11-20 2419
jQuery选择元素下标 $(this).index() //注：本文的两个方法index值均从0开始； 使用如下 <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul> $(document).ready(function(){ $(...
《前端》使用jquery选择器如何获取父级元素、同级元素、子元素--2020年8月26日
BelleDiao的博客
08-26 917
一、获取父级元素 1、 parent([expr]): 获取指定元素的所有父级元素 <!-- 获取父级、子、同级元素 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
jq获取当前li
leizi929的专栏
04-14 1678
已付款 待付款 已取消 jq获取当前ul>li标签一个属性并添加，并且把别的li标签的属性移除 $(function() { $(".ul_header >li").bind("click",function() { $(this).addClass("sel").siblings().removeClass("sel"); //ul>
JS和jQuery中ul li遍历获取对应的下角标
mr_lihuijie的博客
03-13 290
首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2222222</li> <li>3333333</li> ...
jQuery 遍历 ul 的 li 获取对应的内容和下标
tfish的专栏
11-13 2404
<div id="div1"> <ul> <li>1111111</li> <li>2222222</li> <li>3333333</li> <li>4444444</li> </ul>...
js为li添加点击事件，并且输出当前li点击的值
热门推荐
qq_39266265的博客
03-07 1万+
在使用js开发过程中，经常会遇到这样一个问题“如何对多个li添加onClick点击事件，并且输出点击对象的当前内容”。这是我们就想到了常用的for循环，如下图所示： 直接输出当前点击对象的内容 通过运行会发现依次点击li分别会弹出0,1,2； 由这类问题会引发一系列的问法，如果我们alert的是当时循环中的i值会出现什么情况： 直接输出循环中的i值 此时通过运行会发现无论点击那个li...
jQuery获取当前li元素是第几个
shuizhongyue_的专栏
12-03 4922
直接上代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;script type="text/javascript" src="jquery.js"&a
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中，我们需要采取不同的策略来实现这一功能。 首先，我们要明白原生JavaScript的DOM API并不直接...
JavaScript获取元素下标文本
最新发布
05-15
引用中提到了几种方法，比如indexOf和lastIndexOf用于数组元素的索引查找，还有通过jQuery的index()方法获取元素的索引。不过用户的问题是关于原生JavaScript的，所以可能需要用DOM方法。 根据引用3，JavaScript...
原生js怎么获取当前点击的元素下标(非jq)
有问题可关注公众号：前端研究院 后台输入问题回复
11-19 2613
var detail = document.getElementsByClassName("detail"); for(var i =0;i<detail.length;i++){ detail[i].index = i; detail[i].onclick=function(){ alert(this.index) ...
js、jq获取当前点击元素的下标
m0_62098435的博客
10-02 3432
以下是原生js方法： //获取到所有的li标签 var li = technical.querySelectorAll("li") //遍历li标签 for (let i = 0; i < tr2.length; i++) { //将i的下标赋值到li的index上 li[i].index = i ; li[i].onclick = function (){ console.log(tihe.index); }; }; 以下是jq方法，相对于js方便一.
jQuery中在不同场景下，通过点击事件获取当前子元素的下标
Yukinoshita_kino的博客
05-18 3143
jQuery中两种场景下，通过点击事件获取子元素的下标 html代码部分 // 1.第一种场景 <div class="box-one"> <div class="child-one">子元素一</div> <div class="child-one">子元素二</div> <div class="child-one">子元素三</div> </div> // 2.第二种场景 <div cla
js,jQuery初步了解
qq_46003863的博客
11-24 1032
JavaScript JavaScript 的导入方式 不需要显示定义 script 的 type 属性，默认就是 javascript 内部导入 一般放在 head 标签或 body 标签底部 <script> alert("hello,world!"); </script> 外部导入 html 中： 链接式： <script src="JS01/js01.js"></script> JavaScript 中： alert
jquery如何获得ul下指定下标的li元素呢
Anhk丶
04-28 5747
jquery如何获得ul下指定下标的li元素呢 <ul> <li>第知1个</li> <li>第2个</li> <li>第3个</li> <li>第4个</li> </ul> 使用eq选择器获取道 语法：$(":eq(index)") index......
点击li，输出对应li的下标
wuqiongqiong_的博客
09-20 4359
window.onload=function(){ 第一种方法： var oli=document.getElementsByTagName('li');     for(var i=0;i   oli[i].onclick=(function(n){   return function(){   alert(n)   }   })(i)   } } 第二种方法： /
js 遍历ul li 获取点击当前的子元素下标
林中明月间丶
05-12 1万+
&lt;div&gt; &lt;ul id="list"&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&amp
jquery获取下标的方法
jiangjiang1989的博客
06-02 6273
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;jQuery选项卡滑动切换图片代码&lt;/title&gt;&lt;/head&gt;&lt;style&gt; div{margin: 0 auto;text-align: center
使用jquery获取父元素或父节点的方法
03-20 2644
jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1.<ul class="parent1"> 　　2.<li><a href="#" id="item1">jquery获取父节点</a></li> ...
JQuery获取当前对象在集合中下标
03-21
您可以使用 jQuery 的 index() 方法来获取当前对象在集合中的下标。例如，如果您有一个包含多个元素的 jQuery 对象，您可以使用以下代码来获取第一个元素的下标： $("selector").index(); 如果您想获取特定元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值