与其他过滤方法不同，.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" ).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" ).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.5.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> </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.5.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.5.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.5.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" ).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.5.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" ).click(function() {
if ( alt.is( this ) ) {
$( this ).slideUp();
} else {
$( this ).css( "background", "red" );
}
});
</script>
</body>
</html>
|
演示：
