获取DIV索引值答案

【问题标题】：Get DIV index value获取DIV索引值
【发布时间】：2010-01-25 11:22:08
【问题描述】：

我在这里遇到问题，请帮助。我的要求是获取单击的 div 的索引值。有 2 个列表，我需要调用一个函数 doSomething();仅当用户单击第一个 div 集时。有没有我可以实现的。

脚本和HTML如下

$(document).ready(function() {
 $(".list-wrapper li").click(function() {
    var index = $(".list-wrapper div").index(this);
    alert(index);
    });
});

<div class="list-wrapper">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>

<div class="list-wrapper">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>

请帮忙...

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

jQuery 有强大的selectors，所以通常你不需要在事件发生后检查索引。例如：

对于页面上的第一个 div：

$(".list-wrapper:first").click(doSomething);

对于每个列表中的第一个<li>s：

$(".list-wrapper li:first-child").click(doSomething);

如果还想查找索引，则需要搜索被点击的li的父div。此外，选择器 .list-wrapper div 是空的 - 您在 list-wrapper 中没有任何 divs。这将起作用：

var parent = $(this).closest('div')
var index = $(".list-wrapper").index(parent);

【讨论】：

【解决方案2】：

如果它只需要在第一个上，请使用 :first 选择器

http://api.jquery.com/first-selector/

$("div.list-wrapper:first").find("li").click(function() {...

【讨论】：

【解决方案3】：

有很多方法可以做到这一点：

$('div.list-wrapper').first().click(function() { doSomething(); });

和

$("div.list-wrapper:first").click(function() { doSomething(); });

和

$('div.list-wrapper').eq(0).click(function() { doSomething(); });

是第一个想到的。专业提示，在类之前包含元素类型以提高速度（div.blah 比 .blah 快）

或者只是获取索引：

var index = $('div.list-wrapper').index(this);

将 'this' 替换为特定的父项

【讨论】：

【解决方案4】：

试试这个：

<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>


var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));

有关更多信息，请参阅此： http://api.jquery.com/index/

【讨论】：