.is() | jQuery API 文件

.is( selector )傳回：布林值

說明： 針對選取器、元素或 jQuery 物件檢查目前配對的元素組，如果其中至少一個元素與給定的引數相符，則傳回 true。

新增版本： 1.0.is( selector )
- selector
  
  類型：選取器
  
  包含選取器表達式的字串，用於與元素進行配對。
新增版本： 1.6.is( function )
- function
  
  類型：函式( 整數 index, 元素 element ) => 布林值
  
  用作組中每個元素測試的函式。它接受兩個引數，index，這是元素在 jQuery 集合中的索引，以及 element，這是 DOM 元素。在函式中，this 指的是目前的 DOM 元素。
版本新增：1.6.is( 選取 )
- 選取
  
  類型：jQuery
  
  現有 jQuery 物件，用於比對目前元素組。
版本新增：1.6.is( 元素 )
- 元素
  
  類型：元素
  
  一個或多個元素，用於比對目前元素組。

與其他篩選方法不同，.is() 不會建立新的 jQuery 物件。相反地，它允許您在不修改的情況下測試 jQuery 物件的內容。這通常在回呼函式中很有用，例如事件處理常式。

假設您有一個清單，其中兩個項目包含子元素

	
					<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您可以附加一個點擊處理常式到 <ul> 元素，然後限制程式碼僅在清單項目本身被點擊時觸發，而不是其子項目

	
					$( "ul" ).on( "click", function( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.css( "background-color", "red" );
  }
});

現在，當使用者點擊第一個項目的「清單」字樣或第三個項目的任何地方時，被點擊的清單項目將會變成紅色背景。但是，當使用者點擊第一個項目的項目 1 或第二個項目的任何地方時，不會發生任何事，因為在這些情況下，事件的目標分別會是 <strong> 或 <span>。

使用函式

此方法的第二種形式會根據函式而非選取器來評估與元素相關的表達式。對於每個元素，如果函式傳回 true，.is() 也會傳回 true。例如，假設有一個較為複雜的 HTML 片段

	
					<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

您可以附加一個點擊處理常式到每個 <li>，以評估被點擊 <li> 中 <strong> 元素的數目，如下所示

	
					$( "li" ).on( "click", function() {
  var li = $( this ),
    isWithTwo = li.is(function() {
      return $( "strong", this ).length === 2;
    });
  if ( isWithTwo ) {
    li.css( "background-color", "green" );
  } else {
    li.css( "background-color", "red" );
  }
});

範例

顯示幾種 is() 可在事件處理常式中使用的方式。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 4px outset;
    background: green;
    text-align: center;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    background: blue;
  }
  .red {
    background: red;
  }
  span {
    color: white;
    font-size: 16px;
  }
  p {
    color: red;
    font-weight: bolder;
    background: yellow;
    margin: 3px;
    clear: left;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p>&nbsp;</p>
 
<script>
$( "div" ).one( "click", function() {
  if ( $( this ).is( ":first-child" ) ) {
    $( "p" ).text( "It's the first div." );
  } else if ( $( this ).is( ".blue,.red" ) ) {
    $( "p" ).text( "It's a blue or red div." );
  } else if ( $( this ).is( ":contains('Peter')" ) ) {
    $( "p" ).text( "It's Peter!" );
  } else {
    $( "p" ).html( "It's nothing <em>special</em>." );
  }
  $( "p" ).hide().slideDown( "slow" );
  $( this ).css({
    "border-style": "inset",
    cursor: "default"
  });
});
</script>
 
</body>
</html>

				
			

	

示範

傳回 true，因為輸入的父層是表單元素。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<form>
  <input type="checkbox">
</form>
<div></div>
 
<script>
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
$( "div" ).text( "isFormParent = " + isFormParent );
</script>
 
</body>
</html>

				
			

	

示範

傳回 false，因為輸入的父層是 p 元素。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<form>
  <p><input type="checkbox"></p>
</form>
<div></div>
 
<script>
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
$( "div" ).text( "isFormParent = " + isFormParent );
</script>
 
</body>
</html>

				
			

	

示範

針對現有的交替清單元素集合進行檢查。藍色的交替清單元素向上滑動，而其他元素則變為紅色。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
 
<script>
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).on( "click", function() {
  var li = $( this );
  if ( li.is( alt ) ) {
    li.slideUp();
  } else {
    li.css( "background", "red" );
  }
});
</script>
 
</body>
</html>

				
			

	

示範

使用元素而非 jQuery 物件來達成上述範例的另一種方式。針對現有的交替清單元素集合進行檢查。藍色的交替清單元素向上滑動，而其他元素則變為紅色。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
 
<script>
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).on( "click", function() {
  if ( alt.is( this ) ) {
    $( this ).slideUp();
  } else {
    $( this ).css( "background", "red" );
  }
});
</script>
 
</body>
</html>

				
			

	

jQuery API 文件

.is( selector )傳回： 布林值

新增版本： 1.0.is( selector )

新增版本： 1.6.is( function )

版本新增：1.6.is( 選取 )

版本新增：1.6.is( 元素 )

使用函式

示範

示範

示範

示範

示範

.is( selector )傳回：布林值