Question

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

我有：

<ul>
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 ...
</ul>

点击<li>后，我想将其存放在变量中。例如，如果我单击元素3，则“3”将存储在变量中。

如何实现这一目标？

非常感谢你的帮助！

Answer 1

使用index()：

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

索引从0开始。

Answer 2

更有效的Cletus版本＆＃39;回答，这并不需要找到父母和孩子：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 <li>Element 4</li>
</ul>

＆＃13;

Answer 3

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

<ul id="test">
  <li><a href="#">Element 1</a></li>
  <hr /><hr />
  <li><a href="#">Element 2</a></li>
  <li><a href="#">Element 3</a></li>
</ul>

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

同样在上面的示例中，列表包含其他元素，例如<hr />，但您可以使用var index = $(this).parent().parent().children("li").index(this);中的过滤器为＆＃34;元素3和＃34;提供索引2。而不是索引4。

Answer 4

也可以使用普通的 JavaScript ：

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

或者，如果您尝试使用<hr>之类的CSS以外的CSS样式设置排序的html列表（如@Jan所述），请使用querySelectorAll('li')而不是childNodes。

在列表中查找元素的位置

4 个答案: