文章/答案/技术大牛

发布

js 点击的是第几个li

在JavaScript中，如果你想知道点击的是第几个<li>元素，可以通过以下步骤实现：

基础概念

DOM（Document Object Model）：DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
事件监听：通过给元素添加事件监听器，可以在特定事件发生时执行相应的函数。

实现步骤

获取所有的<li>元素：使用document.querySelectorAll('li')可以获取页面中所有的<li>元素。
添加点击事件监听器：为每个<li>元素添加一个点击事件监听器。
确定点击的顺序：在事件处理函数中，通过遍历所有<li>元素并检查哪个元素的索引与当前点击的元素相匹配来确定其位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find the Index of Clicked LI</title>
<script>
window.onload = function() {
    var listItems = document.querySelectorAll('li');
    listItems.forEach(function(li, index) {
        li.addEventListener('click', function() {
            alert('You clicked on the ' + (index + 1) + 'th list item.');
        });
    });
};
</script>
</head>
<body>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
</body>
</html>

应用场景

交互式列表：在用户界面中，当用户点击列表项时，可能需要知道点击的是哪个项目，以便执行相应的操作。
动态内容：在动态生成的内容中，每个列表项可能需要根据其位置执行不同的逻辑。

可能遇到的问题及解决方法

动态添加的元素：如果<li>元素是动态添加到页面上的，上述代码可能不会为这些新元素添加事件监听器。解决方法是使用事件委托，将事件监听器添加到它们的父元素上。

document.querySelector('ul').addEventListener('click', function(event) {
    if (event.target && event.target.nodeName == 'LI') {
        var index = Array.prototype.indexOf.call(this.children, event.target);
        alert('You clicked on the ' + (index + 1) + 'th list item.');
    }
});

通过这种方式，无论何时添加新的<li>元素，它们都会自动拥有点击事件的监听器。

这种方法不仅提高了代码的效率，还确保了新添加的元素也能正确响应用户的点击事件。

页面内容是否对你有帮助？

有帮助

没帮助

如何在Moment.js中从日期获取月份的第几周？

、、

我现在的问题是，我不知道如何获得某个日期是一个月中的第几个星期。我只能在js文档中找到“一年中的一周”。例如，如果我选择今天的日期(12/4/2016)，我想知道这个日期在这个月的哪个星期，也想知道日期(i.e.Tuesday)。有什么想法吗？

浏览 4提问于2016-04-12得票数 0

2回答

点击菜单的li (js，jquery)

、、、、

也许标题不是那么描述我的问题，但在这里，我会给出更多的细节。但如何使单击菜单的项目之一后，单击的项目(页im )将保持与划线效果？例如，当我移到“预订”时，“主页”上的im和它在菜单中的名称是“通过”的，“主

浏览 4提问于2016-06-10得票数 1

2回答

使用jQUERY单击onclick后，从链接中更改html文本

、、

简单的jquery是在href li中单击href之后更改href文本的一种方式吗？

浏览 5提问于2016-09-24得票数 3

回答已采纳

1回答

然而，当涉及到这样的事情时，如果有人能提供帮助，我将不胜感激。window.open(this.options[this.selectedIndex].value,'main')"style="width: 290px"> 然而，表达式不允许轻松地嵌套下拉列表，我被迫尝试一种不同的方法我需要把上面的代码合并到这个：<li><a href="#">Some Text Here</a></li</e

浏览 0提问于2013-02-12得票数 0

3回答

如何实现gmail中的“弹出”功能

、、、

我正在尝试实现一个弹出式面板，就像在Gmail的顶部栏上一样。如果你点击设置图标，你的名字，或者是分享链接，一个面板会把down...is放在那里，一个jquery插件或者其他可以让我快速实现类似效果的东西？

浏览 2提问于2011-07-20得票数 2

回答已采纳

2回答

js点击通过脚本添加的li

、

我点击"My link1"，我有一个提示"I clicked on“-> OK我点击刚添加的"My link2“，什么也没有发生。这是我的代码 <

浏览 0提问于2020-09-24得票数 0

1回答

突出显示和取消突出显示jquery flot饼图

、、、

我使用的是1.1版本的jquery flot饼图。我用这个插件成功地绘制了一个饼图。然而，这对我来说还没有发生。如果有人可以分享一个强调如何以编程方式突出显示Pie flot图表的扇区的代码片段，这将是很有帮助的。

浏览 0提问于2016-04-13得票数 1

2回答

jQuery手风琴链接不工作

、、、、

js'); $('.click-nav .js').click(function(e) {<li><a href="https://www.google.com">Google</a></li> <<em

浏览 4提问于2014-09-09得票数 0

回答已采纳

2回答

如何使用jQuery每个函数获取每个元素的索引

、、

我想让它更动态，为此我使用了each()函数如您所见，单击显示无序列表的所有词尾，这不是我想要的。我想要点击<li> 我希望有人对此有一个简单的解决方案？

浏览 2提问于2015-03-04得票数 0

回答已采纳

3回答

使用jquery获取安莉的ID

、

<li id ="+ "'" + response.set[i].LessonID + "'" +">" + response.set[i].no_of_questions[x].informed +"</li>" 上面的代码用于将列表项的ID设置为json数组中的变量。我的问题是，我希望能够从生成的列表中选择ID并将其存储在局

浏览 2提问于2016-10-14得票数 0

1回答

无法使用parent()或closest()将类添加到父选择器

、、、

我知道这非常简单，但是我已经写了一天又一天的重写这个函数，但没有成功，希望任何人能帮助我。我有一个<li class="has-children">，当我点击它时，它会检查这个事件的<ul>标签里面是否有is-hidden类，它会删除那个类，我的代码运行得很好。<li><a href="#">Watches</a></li>

浏览 2提问于2015-08-24得票数 0

4回答

如何切换“活动”类，但再次单击时也要隐藏它

、

我有一个列表项目菜单，当我点击当前的li时，它会切换.active类并使背景变成绿色。但是，当我单击另一个li时，它仍然显示前面单击的li的绿色背景。我如何使它，使当一个项目被点击时，它切换它的背景，当点击时，它也移除它当另一个li被点击？<ul class="menu-wrapper"> <li><a c

浏览 7提问于2022-03-14得票数 0

回答已采纳

4回答

jQuery -将对象传递给单击处理程序

for(let feature of features){} // I need a reference to the original feature object here 在click处理程序中获得对原始feature-object的

浏览 2提问于2017-02-15得票数 0

3回答

使用Jquery在单击时获取数据属性

当点击处理程序绑定到外部a时，我如何使用jquery获取所选div的div？<ul class="js-click"> <li><a href="" data-attr="world">

浏览 0提问于2016-04-05得票数 1

1回答

如何使用findElements选中下拉菜单中的复选框？(java/seleniumWebDriver)

、

我有： List<WebElement> checkboxes = driver.findElements(By.xpath("//ul[@class='dropdown-menu js-dropdown-menudropdown-menu-form']/li/div/label/span/span[@class='check']"));Xpath

浏览 1提问于2018-08-09得票数 0

回答已采纳

2回答

如何使用jquery更改html按钮标记的文本

、、

button-text" data-toggle="dropdown"><span>1395</span></button> <li><a class="dropdown-item" href="#">1395</a></li>

浏览 0提问于2018-05-08得票数 0

3回答

CSS下拉菜单-单击时关闭子项- jQuery

、

寻找一个简单的jQuery的帮助，以关闭ul ul li项目点击。这是我的小提琴手..<div id='flyout_menu'> <li onClick=”return true”><a href='#'><span>title</span></a> <<em

浏览 0提问于2014-09-11得票数 0

3回答

移动菜单下拉问题

、、

这里是我的网站：，问题是当网站在移动中打开第二个菜单时，名字是“女性”，不像菜单上的“男人”。<ul class="nav-menu navigation-tier navigation-tier-primary" data-navigation-tier-primary> <li" href="/hats/" >Hats<

浏览 1提问于2018-05-16得票数 1

回答已采纳

1回答

jQuery ul只对li儿童有影响

、、

我正在尝试创建一个简单的移动下拉菜单，使用单击显示子菜单。我只希望在点击时调用具有子菜单的jQuery ul项，然后访问它们下面的li。简而言之，我点击了一个按钮，并为该按钮显示了一个下拉列表。下面是我尝试过的jQuery脚本之一。调用html和css的两个jQuery行都不工作。<li><a href="documents">Ducuments</a><

浏览 4提问于2015-08-30得票数 0

回答已采纳

2回答

引导程序下拉列表处于非活动状态

、

有什么技巧可以让我的dropdown工作，就像我尝试过其他技巧一样，但都没有用。代码如下。谢谢 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script> <script src="/&#

浏览 1提问于2016-02-27得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 点击的是第几个li

基础概念

实现步骤

示例代码

应用场景

可能遇到的问题及解决方法

相关·内容

如何在Moment.js中从日期获取月份的第几周？

点击菜单的li (js，jquery)

使用jQUERY单击onclick后，从链接中更改html文本

将javascript合并到href标记中

如何实现gmail中的“弹出”功能

js点击通过脚本添加的li

突出显示和取消突出显示jquery flot饼图

jQuery手风琴链接不工作

如何使用jQuery每个函数获取每个元素的索引

使用jquery获取安莉的ID

无法使用parent()或closest()将类添加到父选择器

如何切换“活动”类，但再次单击时也要隐藏它

jQuery -将对象传递给单击处理程序

使用Jquery在单击时获取数据属性

如何使用findElements选中下拉菜单中的复选框？(java/seleniumWebDriver)

如何使用jquery更改html按钮标记的文本

CSS下拉菜单-单击时关闭子项- jQuery

移动菜单下拉问题

jQuery ul只对li儿童有影响

引导程序下拉列表处于非活动状态

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐