jQuery API .index()_api.index()-优快云博客

本文链接：https://blog.youkuaiyun.com/ling811/article/details/17758537

本文深入探讨了jQuery中.index()方法的使用，包括其基本语法、参数、返回值及实际应用案例。通过实例演示了如何利用.index()方法获取DOM元素在jQuery集合中的位置索引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.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.

例子:

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<style>
div { background:yellow; margin:5px; width:70px; height:70px; text-align:center; line-height:70px;}
span { color:red; }
</style>
</head>

<body>
 <span>点击一个div!</span>
<div>第一个 div</div>
<div>第二个 div</div>
<div>第三个 div</div>
<script>
$("div").click(function(){
	var index = $("div").index(this);
	$("span").text("这是div的位数#" + index)
});
</script>
</body>
</html>

效果图：

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>

</head>

<body>

<style>div { font-weight: bold; color: #090; }</style>
 <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>

效果图：

除<script>不同外，其他一样

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

<script>var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );
</script>

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

<script>
$('div').html('Index: ' +  $('#bar').index('li') );
</script>

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

<script>
var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );
</script>

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

<script>
var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);
</script>

效果图：

jQuery API .index()

.index()

.index()

.index( selector )

.index( element )

Return Values（返回值）

例子:

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

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

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

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

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

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