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

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


用法 
gt selector

不推薦使用的版本：3.4

說明：選擇索引大於的所有元素index在匹配的集合內。

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

    index: 從零開始的索引。

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

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

從 jQuery 3.4 開始， 這:gtpseudo-class 已棄用。從您的選擇器中刪除它並稍後使用過濾結果.slice().例如，:gt(3)可以替換為調用.slice( 4 )(提供的索引需要加一)。

index-related 選擇器

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

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

在 jQuery 1.8 之前，:gt(index) 選擇器確實 not 接受 index 的負值

其他注意事項：

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

例子：

給 TD #5 及更高版本一個黃色背景，給 TD #8 一個紅色文本顏色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gt 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:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>

演示：

相關用法


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