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

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

本文介绍了一个使用jQuery实现的列表项点击切换高亮样式的简单示例。通过为被点击的列表项添加激活类并移除其他列表项上的激活类来实现视觉上的切换效果。此外，还展示了如何获取被点击列表项的索引。 
	$("#detailChange").on("click","li",function(){
		// 切换li列表样式
		$(this).addClass("active");
		$(this).siblings().removeClass("active");
		// 获取当前点击li 的下标
		let index = $(this).index() + 1;
		console.log(index);
	});

jquery实现ul列表中点击li选择radio
猿小白的博客
05-25 1221
如何利用jquery实现ul列表中点击li选择radio呢？ 目录 1、HTML代码 2、JS代码 3、效果预览 1、HTML代码 <ul class="list-group"> <li class="list-group-item"> <input name="money" value="1" type="radio"> <span>1元=1金币&l..
jq获取当前li
leizi929的专栏
04-14 1691
已付款 待付款 已取消 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 304
首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2222222</li> <li>3333333</li> ...
jQuery 遍历 ul 的 li 获取对应的内容和下标
tfish的专栏
11-13 2444
<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 4943
直接上代码 &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并不直接...
jQuery选择元素下标以及通过元素下标获得dom
圆圆的 JavaScript 博客
11-20 2488
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 939
一、获取父级元素 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
JavaScript获取元素下标文本
最新发布
05-15
引用中提到了几种方法，比如indexOf和lastIndexOf用于数组元素的索引查找，还有通过jQuery的index()方法获取元素的索引。不过用户的问题是关于原生JavaScript的，所以可能需要用DOM方法。 根据引用3，JavaScript...
原生js怎么获取当前点击的元素下标(非jq)
有问题可关注公众号：前端研究院 后台输入问题回复
11-19 2745
var detail = document.getElementsByClassName("detail"); for(var i =0;i<detail.length;i++){ detail[i].index = i; detail[i].onclick=function(){ alert(this.index) ...
jQuery中获取对应的下标
欢欢的博客
04-20 1374
$('.game .soft_title>div p').hover(function () { $(this).addClass('active').siblings().removeClass('active'); var _index = $(this).index() $('.game .soft_list .soft_item').eq(_index).addClass('active').siblings().removeClass('ac.
js、jq获取当前点击元素的下标
m0_62098435的博客
10-02 3473
以下是原生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方便一.
jq判断点击的是第几个li
一只程序喵
05-29 1491
<ul id="test"> <li class="test">1</li> <li class="test">2</li> <li class="test">3</li> <li class="test">4</li> </ul> 方法1（有时不管用）： $(".test").click(function(){ alert( $(this).inde
jQuery事件
JJ_Smilewang的博客
07-06 443
单个事件注册，一次只能给一个元素注册一个类型的事件，但是有时需要给同个元素注册多个事件，这时就要写重复写，如下代码：on() 方法可以给元素绑定一个或多个事件的事件处理函数。① events：表示一个或多个用空格分隔的事件类型，如“click”’或“mouseenter”。 ② selector：表示元素的子元素选择器，用于事件委托。 ③ fn：回调函数，即绑定在元素身上的侦听函数。（1）优势1 on() 方法可以绑定多个事件，多个处理事件程序。（2）优势2 可以进行事件委派操作，即把原来加在子元素身
jQuery知识点总结
qq_45030966的博客
09-10 306
1.jQuery ​ 是一个快速小巧、功能丰富的第三方JavaScript库 ​ 功能： ​ 1.选取HTML元素 ​ 2.操作元素 ​ 3.CSS操作 ​ 4.操作HTML事件 ​ … ​ 使用：引入链接到需要的HTML文件中 ​ 1.直接引入网络资源 ​ 2.将网络资源下载到本地去引入 ​ 2.jQuery的使用 2.1$(选择器) 普遍选择器 选取所有元素 console.log($("*")); 标签名选择器 选取的为数组 console.log($("p"));
操作jQuery
li_ding_ding的博客
01-19 642
jQuery02 复习 DOM的零散知识 阻止默认事件:event.preventDefault() 超链接a标签自带 href属性, 点击之后会进行跳转. 给a标签绑定事件 则通常要阻止自带的 href 跳转操作 问题点: 书写外部的js文件 给其他 伙伴 使用, 引入时要防御使用者带有href的情况 阻止冒泡: event.stopPropagation() 监听页面滚动: onscroll 读取滚动距离: document.documentElement.scrollTop || docum
jQuery中在不同场景下，通过点击事件获取当前子元素的下标
Yukinoshita_kino的博客
05-18 3196
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
JQuery获取当前对象在集合中下标
03-21
您可以使用 jQuery 的 index() 方法来获取当前对象在集合中的下标。例如，如果您有一个包含多个元素的 jQuery 对象，您可以使用以下代码来获取第一个元素的下标： $("selector").index(); 如果您想获取特定元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值