index()
从匹配的元素中搜索给定元素的索引值,从0开始计数。
.index()
- 这个方法不接受任何参数。
.index(selector)
- selector类型: Selector。一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。
.index(element)
- element类型: Element, jQuery。将要用于查找的DOM元素,或者jQuery对象中的第一个元素。
Return Values(返回值)
如果不传递任何参数给.index()
方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。
如果在一组元素上调用.index()
,并且参数是一个DOM元素或jQuery对象,.index()
返回值就是传入的元素相对于原先集合的位置。
如果参数是一个选择器,.index()
返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则.index()
返回-1.
Detail(细节)
.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)); We get back the zero-based position of the list item:
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'));
我们就能得到这个列表项所在的位置,从0开始计数的:
Index: 1
如果我们忽略参数,.index()
将返回集合中第一个元素相对于其同辈元素的位置:
alert('Index: ' + $('#bar').index());
又一次,我们得到了这个li从0开始数的位置。
Index: 1
例子
点击后,返回那个div在页面上的索引值(从0开始计数)。
<!DOCTYPE html> <html> <head> <style> div { background:yellow; margin:5px; } span { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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 clickedvar index = $("div").index(this ); $("span").text("That was div index #" + index); }); </script> </body> </html>
返回ID为bar的元素的索引值。
<!DOCTYPE html> <html> <head> <style>div { font-weight: bold; color: #090; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- foo
- bar
- baz
返回jQuery集合中第一项的索引值。
<!DOCTYPE html> <html> <head> <style>div { font-weight: bold; color: #090; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- foo
- bar
- baz
返回ID为bar的元素相对于所有<li>元素的索引值。
<!DOCTYPE html> <html> <head> <style>div { font-weight: bold; color: #090; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
返回ID为bar的元素相对于同辈的索引值。
<!DOCTYPE html> <html> <head> <style>div { font-weight: bold; color: #090; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
由于没有元素的ID为foobar,所以返回-1。
<!DOCTYPE html> <html> <head> <style>div { font-weight: bold; color: #090; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- foo
- bar
- baz