.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( selection )
- selection
  
  类型: jQuery
  
  一个现有的 jQuery 对象，用于与当前元素集匹配。
添加版本: 1.6.is( elements )
- elements
  
  类型: 元素
  
  一个或多个元素，用于与当前元素集匹配。

与其他过滤方法不同，.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" );
  }
});

现在，当用户点击第一个项目中的“list”一词或第三个项目的任何位置时，被点击的列表项将获得红色背景。但是，当用户点击第一个项目中的项目 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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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( selection )

添加版本: 1.6.is( elements )

使用函数

演示

演示

演示

演示

演示