使用 Jquery 获取列表项的索引答案

【问题标题】：Getting the index of a list item with Jquery使用 Jquery 获取列表项的索引
【发布时间】：2010-07-13 17:59:59
【问题描述】：

我试图找出最后一个列表项的索引号，但我正在使用的 jquery 一直返回 -1。这是我正在使用的 JS 和 html。

var index = $('#imageThumbnails li:last').index(this);

<div id="imageThumbnails">
   <ul class="gallery_demo_unstyled">
      <li class="active"><img src="test-img.jpg" width="394" height="394" alt=" " /></li>
      <li><img src="test-img2.jpg" width="394" height="394" alt=" " /></li>
      <li><img src="test-img3.jpg" width="394" height="394" alt=" " /></li>
      <li><img src="test-img4.jpg" width="394" height="394" alt=" " /></li>
      <li><img src="test-img5.jpg" width="394" height="394" alt=" " /></li>
      <li><img src="test-img6.jpg" width="394" height="394" alt=" " /></li>
      <li><img src="test-img7.jpg" width="394" height="394" alt=" " /></li>
    </ul>
 </div>

感谢您的帮助。

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

您需要在集合上调用 index，并传入该集合的子项。

var items = $('#imageThumbnails li');
var lastItem = $('#imageThumbnails li:last');
var index = items.index(lastItem);

如果您在点击函数处理程序中，您可以执行以下操作：

var items = $('#imageThumbnails li').click(function() {
    var index = items.index(this);

    // now that I know where I am, why am I here?
});

【讨论】：

items 变量包含在内部函数的闭包中，将在 click 函数执行时可用。由于该时间将在未来，整个表达式将完成，items 将被设置为表达式产生的值数组。
@joshperry- 是的，我理解那部分，但你拥有它的方式是将点击的索引存储在值中，你也可以点击列表标签吗？
当然，您几乎可以在任何 DOM 元素上注册点击事件。无序列表通常用于菜单和导航栏，列表很好地传达了这些结构的语义。
@joshperry-你说得对，你可以，但正如我所说，你设置它的方式只是存储点击的索引而不是最后一个？你是故意的吗？
@TStamper-你说得对，第二个例子没有展示如何获取最后一个元素的索引，它只展示了如何获取点击的li的索引。这只是一个必然的例子。