使用纯javascript获取点击元素的索引

IT技术 javascript indexing onclick
2021-01-20 22:59:16

我需要知道点击元素的索引。不知道该怎么做

for (i = 0; i < document.getElementById('my_div').children.length; i++) {
    document.getElementById('my_div').children[i].onclick = function(){'ALERT POSITION OF CLICKED CHILD'};
}

这个.index？

这是我正在尝试做的一个例子（它只返回 6）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;}
#container div{height:50px;line-height:50px; text-align:center}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script>
for (i = 0; i < document.getElementById('container').children.length; i++) {
    document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')};
}
</script>
</body>
</html>
6个回答

使用 ES6 解构，你可以做到

const index = [...el.parentElement.children].indexOf(el)

或者

const index = Array.from(el.parentElement.children).indexOf(el)

或 ES5 版本

var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el)

这是一段代码，可以帮助您获取for循环内单击元素的索引。您只需要一个新的范围：

var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

编辑 1：将用户 Felix Kling 的评论纳入答案。

事件处理程序已经是一个闭包

编辑 2：更新小提琴链接

@rohan-patel 这很奇怪。这是一个较新的小提琴：jsfiddle.net/gffwse8q（在 Chrome 和 Safari 中测试）。
2021-03-14 22:59:16
知道为什么代码可能无法显示任何输出吗？我尝试了 Safari 和 Google。
2021-03-27 22:59:16
谢谢布鲁塔勒斯！这就是我想要的:)
2021-03-29 22:59:16
严格来说，事件处理程序已经是一个闭包。OP 需要的是一个新的范围。
2021-04-05 22:59:16
不客气:) 通过链接了解更多关于闭包的信息。
2021-04-06 22:59:16

公认的答案（来自 Ashwin Krishnamurthy）实际上远非最佳。

你可以这样做：

const g = document.getElementById('my_div');
for (let i = 0, len = g.children.length; i < len; i++)
{
    g.children[i].onclick = function(){
        alert(index)  ;
    }
}

以避免创建不必要的关闭。即便如此，它也不是最佳选择，因为您创建 6 个 DOM 事件处理程序（divs在上面的示例中为6 个）只是为了获得一些单击div.

你真正应该做的是使用一个事件代表团（附单点击事件父），然后检查e.target使用我前面和上面提到的方法的指数（使用纯JavaScript获得点击元素的索引）。

不知道为什么这有 -1，因为它比这里提到的任何解决方案都更好;)
2021-03-18 22:59:16
它只是不起作用。你有没有试过运行它？
2021-03-21 22:59:16
目前我认为这是最好的答案。由于我们可以选择使用 'let' 来将 'i' 保持在局部范围内，在这种情况下，它优于 'var' 并且我们不需要编写 anon 自调用函数来定义我们自己的局部变量。只需将其更改为“警报（i）”而不是警报（索引），因为您的代码中未定义索引@MelkorNemesis
2021-03-31 22:59:16

我做了一个函数来查找索引。

function getElementIndex(el) {
  return [...el.parentElement.children].indexOf(el);
}

像这样调用它：

const index = getElementIndex(element);
非常感谢，非常聪明的解决方案。
2021-04-13 22:59:16

表格单元格元素有一个cellIndex属性，但我不知道其他元素。你要么必须

  • 创建一个闭包来保留值 i
  • 动态计数previousSiblings
  • index在 for 循环中添加一个属性并读取它（不要增加宿主对象）。

我认为关闭方法将是最简单的。请确保您已经了解闭包的工作原理，网上有很好的解释。

function makeAlertNumber(element, i) {
    element.addEventListener('click', function() {
       alert('Number ' + i + ' was clicked');
    }, false);
}
[].slice.call(document.getElementById('container').children).forEach(makeAlertNumber); // homework: find a way to express this for older browsers :-)
感谢 Bergi，您想在我添加的代码中展示一个示例吗？
2021-03-26 22:59:16
其它你可能感兴趣的问题
上一篇什么是使用 Javascript 支持进行屏幕抓取的好工具？ 下一篇如何根据用户滚动加载网页内容