Question

我需要知道clicked元素的索引。无法弄清楚该怎么做

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>

Answer 1

这是一个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的评论纳入答案。

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

编辑2：更新了小提琴链接

Answer 2

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

Answer 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）。

Answer 4

表格单元格具有cellIndex属性，但我不了解其他元素。你要么必须

创建一个闭包以保留i
动态计算previousSibling s
在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 :-)

Answer 5

索引与什么有关？

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

提醒一句：由于HTMLCollections是“Live”，您应该使用它们来计算循环中的.length。如果碰巧是在循环中添加或删除这些元素，则会发生奇怪和危险的事情。在调用循环之前缓存.length值。

Answer 6

我遇到了同样的问题，我需要遍历数组并获取被单击项的索引号。

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

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

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

这将console.log记录单击的项目的索引号。

希望这可以回答一些问题。

Answer 7

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

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

这样称呼：

let index = index(element);

Answer 8

    onSubmit() {
        console.log(this.checkoutForm.value); 
 this.productservice.addProducts({category:"fashion",name:"asdf",price:"2323", discount:"123",upfile:"lction"})
        .subscribe(res => {
            this.checkoutForm.reset();
        });  
      }

Answer 9

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

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

9 个答案: