在列表中查找元素的位置

我希望使用jQuery找到列表中单击元素的位置（即顺序）。

我有：

 
Element 1
 
Element 2
 
Element 3
 ...  

点击

，我想将它的位置存储在一个变量中。 例如，如果我单击元素3，则“3”将存储在变量中。

怎么能实现这一目标？

非常感谢您的帮助！

Answer 1

使用index() ：

 $("li").click(function() { var index = $(this).parent().children().index(this); alert("You clicked item " + index); }); 

索引从0开始。

Answer 2

更有效的Cletus答案版本，不需要找父母和孩子：

 $("li").on("click", function() { var index = $(this).index(); alert(index); }); 

  
 
Element 1
 
Element 2
 
Element 3
 
Element 4
  

Answer 3

以前的答案很好。 2个补充：
当您的列表包含列表项时，例如：

 
 
Element 1
 
 
Element 2
 
Element 3
  

那么你必须使用var index = $(this).parent().parent().children().index(this);

同样在上面的例子中，列表包含其他元素，如

---

，你可以在var index = $(this).parent().parent().children("li").index(this); 为“元素3”而不是索引4提供索引2。

Answer 4

也可以用纯JavaScript完成：

 let = _this = this, indx = Array.prototype.slice.call(_this.parentElement.childNodes).indexOf(_this); 

或者，如果您尝试使用除

---

CSS

---

类的CSS之外的有序html列表样式，如@Jan所述，请使用querySelectorAll('li')而不是childNodes 。