.index()

.index( ) 返回: Number

描述: 从匹配的元素中搜索给定元素的索引值,从0开始计数。

  • version added: 1.4.index()

  • version added: 1.4.index( selector )

    selector一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。

  • version added: 1.0.index( element )

    element将要用于查找的DOM元素,或者jQuery对象中的第一个元素。

返回值

如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。

如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置。

如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1.

细节

.get() 接受一个索引值参数并返回对应的DOM节点, .index() 与其正好相反,接受一个DOM节点然后返回其索引值。假设页面上有个简单的无序列表:

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

如果我们获取了三个li中的一个元素(例如通过DOM函数,或者事件处理函数中的上下文this), .index() 能够在匹配的元素中找到这个列表项:

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

我们就能得到这个li所在的位置,从0开始计数的:

Index: 1

类似的,如果我们获得了含有这三个之中一个元素的jQuery对象, .index() 也能用于搜索那个列表项:

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

我们就能得到这个li所在的位置,从0开始计数的:

Index: 1

注意,如果作为 .index() 参数使用的jQuery集合含有多个元素,则只会使用第一个:

var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));

我们得到了匹配的li集合中,第一个元素的位置,从0开始计数。

Index: 1

如果我们将一个字符串传递给 .index() 方法,这个字符串会被解析成jQuery选择器,将会定位到调用 .index() 的jQuery对象中第一个元素,相对于由这个选择器匹配到的元素集合中的位置:

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

我们就能得到这个列表项li#bar所在的位置,从0开始计数的:

Index: 1

如果我们忽略参数, .index() 将返回集合中第一个元素相对于其同辈元素的位置:

alert('Index: ' + $('#bar').index();

又一次,我们得到了这个li从0开始数的位置。

Index: 1

Examples:

Example: 点击后,返回那个div在页面上的索引值(从0开始计数)。

<!DOCTYPE html>
<html>
<head>
  <style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<script>
$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});
</script>

</body>
</html>

Demo:

Example: 返回ID为bar的元素的索引值。

<!DOCTYPE html>
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
<script>var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );</script>

</body>
</html>

Demo:

Example: 返回jQuery集合中第一项的索引值。

<!DOCTYPE html>
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
<script>var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );
</script>

</body>
</html>

Demo:

Example: 返回ID为bar的元素相对于所有 <li> 元素的索引值。

<!DOCTYPE html>
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
<script>$('div').html('Index: ' +  $('#bar').index('li') );</script>

</body>
</html>

Demo:

Example: 返回ID为bar的元素相对于同辈的索引值。

<!DOCTYPE html>
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
<script>var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );</script>

</body>
</html>

Demo:

Example: 由于没有元素的ID为foobar,所以返回 -1。

<!DOCTYPE html>
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
<script>var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);</script>

</body>
</html>

Demo:

设计酷,jquery1.6 api中文手册