JavaScript 在 ul 中查找 li 索引

2023-11-24

我正在尝试通过 Javascript 中的 id 查找列表项的索引。例如,我有 5 个项目的列表,给定一个元素,我想找出它在列表中的位置。下面是我希望构建的代码。

它使用 onclick 处理程序来查找正在工作的元素,然后我只需要以某种方式找出列表“squareList”中元素的位置。

window.onload=function(){
    function getEventTarget(e){
        var e=e || window.event;
        return e.target || e.srcElement;
    }

    function selectFunction(e){
        var target=getEventTarget(e);
        alert(target.id);
    }

    var squareList=document.getElementById('squareList');
    squareList.onclick=function(e){
        selectFunction(e);
    }
}

要获取索引,您可以执行以下操作:

Array.prototype.indexOf.call(squareList.childNodes, target)

对于 jQuery,因为您已经在使用跨浏览器解决方法:

$(document).ready(function() {
    $('#squareList li').click(function() {
        var index = $(this).index();
    })
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 在 ul 中查找 li 索引 的相关文章

随机推荐

  • 将 R 列表(矩阵)的每个成员彼此相乘

    我在 R 中有一个大小相等的矩阵列表 我想将它们相互相乘 我正在寻找一种方法来做 list A list B list C 无需手动输入 我的列表有几十个矩阵 Use Reduce如果你想要逐个元素相乘 gt Lists lt list m
  • C 如何正确测量时间?

    这是 算法 但是当我想测量执行时间时 它给我零 为什么 define ARRAY SIZE 10000 clock t start end start clock for i 0 i lt ARRAY SIZE i non parallel
  • 托管 Windows 窗体设计器 - 在运行时序列化设计器并生成 C# 代码

    我正在创建一个设计器界面并将控件加载到运行时 我在将控件反序列化 加载到运行时时遇到问题 我尝试过的所有方法似乎都存在某种类型的问题 面临的问题例如 控件仍然受设计时的限制 并非所有属性都与所有属性 即嵌套属性 反序列化 控件关联似乎确实得
  • CSS 中的 div 布局就像 HTML 表格中的表格单元格

    今天我又一次偶然发现了 css 布局时经常遇到的一个问题 我想在水平行中有 5 个 div 举例来说 它们的宽度应该是 1 60 像素 2 30 3 40 像素 4 5 100 像素 其中 代表 填满剩余空间 过去 这就是我们布局宽度表的方
  • 获取所选文本的父元素

    是否可以获取页面中所选文本的父元素 例如 div class someparent Selection of this text should refer to the someparent class span class spanpar
  • 是否可以在 Xcode 4.3 中使用 NSArray、NSDictionary 和 NSNumber “文字”? (LLVM 4.0)

    显然 新的 Objective C 文字已经进入了铿锵的树干 从而揭开了保密协议的神秘面纱 我的问题 我怎么能够 以上帝的名义 在 Xcode v4 3 中使用这些构造 见下文 如果没有 并且我一直在等待 XCode 4 4 OSX 10
  • 如何从两个已排序数组中的对中获取 K 个最小的乘积?

    给出了两个排序数组 我们必须从这些数组的对中找到 K 个最小的乘积 我能想到一个 mnlogk 解决方案 但即使数组未按排序顺序 此解决方案也有效 我们可以利用这个排序顺序并找到更好的解决方案吗 我尝试使用大小为 k 的最大堆来获取 mnl
  • TR的高度如何确定?

    是否可以固定表格上行 tr 的高度 当我缩小浏览器窗口时 问题就会出现 一些行开始播放 并且我无法修复行的高度 我尝试了几种方法 tr width 20 tr style height 20px td height 20 td style
  • Docker + Rspec + Capybara - 参数 [0] 未定义

    我试图让我的规格在 docker 中无头工作 它们在我的 mac 上本地运行良好 但是当我在 docker 容器内运行它们时 我收到此错误 重复多次 Selenium WebDriver Error JavascriptError argu
  • Laravel 4:对如何使用 App::make() 感到困惑

    我正在尝试遵循本文中概述的存储库模式http code tutsplus com tutorials the repository design pattern net 35804 highlighter 174798我正在尝试使用 App
  • 在 web.xml 中将 servlet 设置为默认主页[重复]

    这个问题在这里已经有答案了 我有一个 servlet 注册在web xml如下
  • PHP 中的连接 ECHO 语法

    我做了一个小功能 WordPress 使用echo Some code switch linktype case next echo p class next previous post link link prevthumbnail p
  • 在跨平台应用程序中使用 snprintf

    我正在编写一个 C 程序 预计可以使用所有主要编译器进行编译 目前我正在 Linux 机器上的 GCC 上进行开发 并在提交代码之前在 MSVC 上进行编译 为了使交叉编译变得容易 我正在编译 ansi and pedantic旗帜 这很有
  • ASP.NET Identity(使用IdentityServer4)获取外部资源oauth访问令牌

    我已经阅读了 IdentityServer4 的文档 并将其设置为使用 Microsoft Office 365 作为登录提供程序 当用户登录后 我想创建一个按钮 他可以在其中允许我的应用程序使用 graph microsoft com 的
  • 以编程方式获取代码的 Big-O 效率

    我想知道是否有任何自动方法可以 至少粗略地 确定给定函数的 Big O 时间复杂度 如果我绘制 O n 函数与 O n lg n 函数的图表 我想我将能够直观地确定哪个是哪个 我认为必须有一些启发式解决方案可以自动完成此操作 有任何想法吗
  • “import foo.*”不应该包含子包“foo.bar.*”吗?

    在学习 Java 时 我想到了许多教程中相当令人困惑的属性 考虑示例教程中的以下两个导入 import java awt import java awt event 第一行显然导入了 java awt 包 第二行导入了 awt 的子包 但是
  • mongoose.connection() 和 mongoose.createConnection() 之间的混淆

    我已经研究了 mongoose 三天 对这两种方法的使用有点困惑 我知道 mongoose connection 将来会被弃用 问题是 当我尝试转换 从 mongoose connection 到 mongoose createConnec
  • GCDAsyncUdpSocket 与组播发送和接收

    在第一种方法中 我创建客户端 服务器应用程序 基于样本项目 将一些数据发送到服务器 Legend sender address reciver ip port reciver port reciver address null since
  • 具有不可编辑/不可取消后缀的 EditText [重复]

    这个问题在这里已经有答案了 我为我的一项活动创建了一个布局 用户可以在其中的某些 EditText 小部件中插入值 我需要其中一些 EditText 必须具有不可编辑的后缀 如 cm mm 等 用户插入值后 我将解析这些 EditText
  • JavaScript 在 ul 中查找 li 索引

    我正在尝试通过 Javascript 中的 id 查找列表项的索引 例如 我有 5 个项目的列表 给定一个元素 我想找出它在列表中的位置 下面是我希望构建的代码 它使用 onclick 处理程序来查找正在工作的元素 然后我只需要以某种方式找