:contains() 選擇器

分類： 選擇器 > 內容篩選器 | 選擇器 > jQuery 延伸

contains 選擇器

說明： 選取所有包含指定文字的元素。

  • 新增版本： 1.1.4jQuery( ":contains(text)" )

    text： 要尋找的文字字串。區分大小寫。

符合的文字可以直接顯示在選取的元素中，在該元素的任何後代中，或兩者皆有。與屬性值選擇器一樣，:contains() 括號內的文字可以寫成裸字或加上引號。文字必須符合大小寫才能被選取。

範例

找出所有包含「John」的 div 並加上底線。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
 
<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
 
</body>
</html>

示範