:lt() 選擇器 | jQuery API 文件

lt 選擇器版本已棄用：3.4

說明：選取符合的集合中索引小於 index 的所有元素。

版本已加入：1.0jQuery( ":lt(index)" )

index：從 0 開始的索引。
版本已加入：1.8jQuery( ":lt(-index)" )

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

自 jQuery 3.4 起，:lt 偽類別已棄用。從您的選擇器中移除它，並稍後使用 .slice() 篩選結果。例如，:lt(3) 可以替換為呼叫 .slice( 0, 3 )。

與索引相關的選擇器

與索引相關的選擇器（包括這個「小於」選擇器）會篩選符合先行表達式的元素集合。它們會根據這些選擇器中元素的順序縮小集合範圍。例如，如果元素最初是使用類別選擇器 (.myclass) 選取，並且傳回四個元素，則這些元素會針對這些選擇器的目的賦予 0 到 3 的索引。

請注意，由於 JavaScript 陣列使用0 為基礎的索引，這些選取器反映了這個事實。這就是為什麼 $( ".myclass:lt(1)" ) 選取文件中的第一個具有類別 myclass 的元素，而不是不選取任何元素。相反，:nth-child(n) 使用1 為基礎的索引以符合 CSS 規格。

在 jQuery 1.8 之前，:lt(index) 選取器不接受 index 的負值

其他注意事項

由於 :lt() 是 jQuery 擴充，而不是 CSS 規格的一部分，使用 :lt() 的查詢無法利用原生 DOM querySelectorAll() 方法提供的效能提升。若要在現代瀏覽器中獲得更好的效能，請改用 $("your-pure-css-selector").slice(0, index)。

範例

讓索引小於 4（TD#4）的 TD 具有黃色背景，讓索引小於 -2 的 TD 具有紅色文字顏色。

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

jQuery API 文件

lt 選擇器版本已棄用：3.4

版本已加入：1.0jQuery( ":lt(index)" )

版本已加入：1.8jQuery( ":lt(-index)" )

其他注意事項

示範