與其他過濾方法不同，.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>
|
演示：
