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

【问题标题】：Get index of clicked element using pure javascript使用纯javascript获取点击元素的索引
【发布时间】：2012-02-06 18:38:42
【问题描述】：

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

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

this.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>

【问题讨论】：

Javascript closure inside loops - simple practical example 的可能重复项

标签： javascript indexing onclick

【解决方案1】：

使用 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)

【讨论】：

【解决方案2】：

这里有一个piece of code，可以帮助你获取for循环内被点击元素的索引。您只需要一个新的scope：

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 的 cmets 纳入答案。

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

编辑 2： 更新小提琴链接

【讨论】：

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

【解决方案3】：

接受的答案（来自 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 事件处理程序（在上面的示例中为 6 个 divs）只是为了获得单击次数 div。

您实际上应该做的是使用事件委托（将单次单击事件附加到父级），然后使用我之前和上面提到的方法检查e.target的索引（ Get index of clicked element using pure javascript)。

【讨论】：

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

【解决方案4】：

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

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

这样称呼它：

const index = getElementIndex(element);

【讨论】：

非常感谢，非常聪明的解决方案。

【解决方案5】：

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

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

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

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，您想在我添加的代码中显示一个示例吗？

【解决方案6】：

我遇到了同样的问题，我需要遍历一个数组并获取所点击项目的索引号。

这是我解决问题的方法...

//first store array in a variable
let container = [...document.getElementById('container')];

//loop through array with forEach function
container.forEach((item,index) => {
    item.addEventListener('click', () => console.log(index));
});

这将控制台记录所点击项目的索引号。

希望这能回答一些问题。

【讨论】：

当你使用forEach时，你不需要做container.indexOf。只需将您的forEach(item => { 语法更改为forEach((item, index) => {，您就有了index !!

【解决方案7】：

索引与什么有关？

如果它与当前 HTML 集合中的索引有关，则该索引将仅用您的 i 计数器变量表示。

请注意：由于 HTMLCollections 是“实时的”，因此您应该使用它们来找出循环中的 .length。如果碰巧在循环中添加或删除了这些元素，则可能会发生奇怪而危险的事情。在调用循环之前缓存.length 值。

【讨论】：

@david：确实。完全忘记了这个事实:)
谢谢 jAndy。与其他孩子相关的索引。添加一个示例，如果你想看看
你也可以简单地以相反的顺序遍历元素

【解决方案8】：

for (let i = 0; i < childNodes.length; i++){
      (function(index){
        childNodes[i].addEventListener("click", myScript);
        function myScript(){
          console.log(index);
        }
      })(i);
    }

【讨论】：

如果您使用let，则不需要IIFE。

【解决方案9】：

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
该函数将返回其父元素中传递的节点的索引。

【讨论】：

node 永远不会改变，所以这是一个无限循环。

【解决方案10】：

getIndexOfNode = function(node){
    var i = 1;
    while(node.previousElementSibling != null){
      node = node.previousElementSibling;
        i++
    }
    return i;
}

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?