當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery :eq()用法及代碼示例


用法 
eq selector

不推薦使用的版本：3.4

說明：選擇索引處的元素n在匹配的集合內。

  • 添加的版本：1.0jQuery( ":eq(index)" )

    index: 要匹配的元素的從零開始的索引。

  • 添加的版本：1.8jQuery( ":eq(-index)" )

    indexFromEnd: 要匹配的元素的從零開始的索引，從最後一個元素開始倒數。

從 jQuery 3.4 開始， 這:eqpseudo-class 已棄用。從您的選擇器中刪除它並稍後使用過濾結果.eq().

index-related 選擇器(:eq()、:lt()、:gt()、:even、:odd)過濾與前麵的表達式匹配的元素集。他們根據該匹配集合中元素的順序縮小集合範圍。例如，如果首先使用類選擇器 (.myclass) 選擇元素並返回四個元素，則為這些選擇器的目的為這些元素指定索引 0 到 3。

請注意，由於 JavaScript 數組使用 0-based indexing ，因此這些選擇器反映了這一事實。這就是為什麽$( ".myclass:eq(1)" ) 選擇文檔中類myclass 的第二個元素，而不是第一個元素。相比之下，:nth-child(n) 使用 1-based indexing 以符合 CSS 規範。

在 jQuery 1.8 之前，:eq(index) 選擇器確實 not 接受 index 的負值(盡管 .eq(index) 方法確實如此)。

其他注意事項：

  • 因為 :eq() 是 jQuery 擴展而不是 CSS 規範的一部分，所以使用 :eq() 的查詢無法利用本機 DOM querySelectorAll() 方法提供的性能提升。為了在現代瀏覽器中獲得更好的性能，請改用$("your-pure-css-selector").eq(index)。

例子：

找到第三個 td。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:eq( 2 )" ).css( "color", "red" );
</script>
 
</body>
</html>

演示：

將三種不同的樣式應用於列表項，以證明 :eq() 旨在選擇單個元素，而 :nth-child() 或 :eq() 在諸如 .each() 的循環結構中可以選擇多個元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="nav">
  <li>List 1, item 1</li>
  <li>List 1, item 2</li>
  <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>
 
<script>
// Applies yellow background color to a single <li>
$( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
 
// Applies italics to text of the second <li> within each <ul class="nav">
$( "ul.nav" ).each(function( index ) {
  $( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
});
 
// Applies red text color to descendants of <ul class="nav">
// for each <li> that is the second child of its parent
$( "ul.nav li:nth-child(2)" ).css( "color", "red" );
</script>
 
</body>
</html>

演示：

通過定位倒數第二個 <li> 將類添加到列表 2 的第 2 項

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <style>
  .foo {
    color: blue;
    background-color: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="nav">
  <li>List 1, item 1</li>
  <li>List 1, item 2</li>
  <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>
 
<script>
$( "li:eq(-2)" ).addClass( "foo" )
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 :eq()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。