当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


JQuery .index()用法及代码示例


用法
.index() => Integer

说明:从匹配的元素中搜索给定的元素。

  • 添加的版本:1.4.index()

    • 此签名不接受任何参数。
  • 添加的版本:1.4.index( selector )

    • selector
      类型:Selector
      表示要在其中查找元素的 jQuery 集合的选择器。
  • 添加的版本:1.0.index( element )

    • element
      类型:ElementjQuery
      要查找的 jQuery 对象中的 DOM 元素或第一个元素。

返回值

如果没有参数传递给 .index() 方法,则返回值是一个整数,指示 jQuery 对象中的第一个元素相对于其兄弟元素的位置。

如果在元素集合上调用 .index() 并传入 DOM 元素或 jQuery 对象,则 .index() 返回一个整数,指示所传递元素相对于原始集合的位置。

如果选择器字符串作为参数传递,.index() 返回一个整数,指示 jQuery 对象中的第一个元素相对于选择器匹配的元素的位置。如果未找到该元素,.index() 将返回 -1。

细节

.get() 的补充操作,它接受一个索引并返回一个 DOM 节点,.index() 可以接受一个 DOM 节点并返回一个索引。假设我们在页面上有一个简单的无序列表:

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

如果我们检索三个列表项之一(例如,通过 DOM 函数或作为事件处理程序的上下文),.index() 可以在匹配元素集中搜索此列表项:

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

我们取回列表项从零开始的位置:

索引:1

同样,如果我们检索由三个列表项之一组成的 jQuery 对象,.index() 将搜索该列表项:

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

我们取回列表项从零开始的位置:

索引:1

请注意,如果用作 .index() 方法参数的 jQuery 集合包含多个元素,则将使用匹配的元素集中的第一个元素。

var listItems = $( "li" ).slice( 1 );
alert( "Index: " + $( "li" ).index( listItems ) );

我们取回匹配集中第一个列表项的从零开始的位置:

索引:1

如果我们使用字符串作为.index() 方法的参数,它会被解释为jQuery 选择器字符串。定位对象的匹配元素中也匹配此选择器的第一个元素。

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

我们取回列表项从零开始的位置:

索引:1

如果我们省略参数,.index() 将返回匹配元素集中第一个元素相对于其兄弟元素的位置:

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

再次,我们取回列表项的从零开始的位置:

索引:1

例子:

单击时,返回页面中该 div 的索引(从零开始)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    background: yellow;
    margin: 5px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/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 that was clicked
  var index = $( "div" ).index( this );
  $( "span" ).text( "That was div index #" + index );
});
</script>
 
</body>
</html>

演示:

返回 ID 为 bar 的元素的索引。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/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>

演示:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/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" ).slice( 1 );
$( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
</script>
 
</body>
</html>

演示:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/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 lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/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>

演示:

返回 -1,因为没有 ID 为 foobar 的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/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>

演示:

相关用法


注:本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .index()。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。