jQuery逆引きリファレンス
要素セットに、指定された条件に合致する要素が含まれるかを判定するには？（is）
isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。
isメソッドは、現在の要素セット（＝jQueryオブジェクトで保持している要素群）に、条件に合致する要素が1つでも含まれているかを判定します*1。他の大部分のjQueryメソッドと異なり、isメソッドの戻り値はtrue／falseである点に注意してください（jQueryオブジェクトではありません）。
- *1 複数の要素が含まれる場合も、そのうちの1つだけでも条件に合致すればtrueを返します。
以下に、具体的な例を見てみましょう。以下は、<div>要素のボックスをクリックした時、class属性が"correct"であれば「おめでとう、正解です！」、class属性が"incorrect"であれば「残念、不正解...」というダイアログを表示する簡易なクイズアプリです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
.box {
height:50px;
width:50px;
float:left;
margin-left:10px;
padding: 10px 15px;
border: solid 1px;
}
</style>
</head>
<body>
<p>料理の「さしすせそ」で、「そ」は何？</p>
<div class="box">ソース</div>
<div class="box correct">味噌</div>
<div class="box">醤油</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
$('div').click(function() {
// 正解／不正解いずれをクリックしたかでメッセージを分岐
if ($(this).is('.correct')) {
window.alert('おめでとう、正解です！');
} else {
window.alert('残念、不正解...');
}
});
});
</script>
</body>
</html>
|
［味噌］をクリックした場合
［醤油］をクリックした場合
位置を表すセレクターを利用するときの注意
:first、:gt、:evenなど、位置によって要素を絞り込むフィルターは、jQuery 1.7の前後で挙動が異なる点に注意してください。例えば以下のようなコードをjQuery 1.7より前のバージョンで動作してみましょう。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<p>料理のさしすせそ</p>
<ul>
<li>砂糖</li>
<li>塩</li>
<li>酢</li>
<li>醤油</li>
<li>味噌</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(function() {
console.log($('li:even').is('li:odd'));
});
</script>
</body>
</html>
|
この場合、isメソッドはtrueを返します。jQuery 1.7より前のバージョンでは、位置フィルターが現在の要素セットを基点とした位置を示すためです。よって、偶数番目の<li>要素を取得した後、その中での奇数番目の<li>要素は存在します。
一方、jQuery 1.7以上では、上のサンプルはfalseを返します。jQuery 1.7ではisメソッドの位置フィルターは文書全体を基点とするためです。よって、偶数番目の<li>要素を取得した中に、文書全体として奇数番目の<li>要素は存在するわけがありません。
すでにjQuery 1.7よりも前のバージョンを利用している人は少なくなっていると思われますが、レガシーアプリを移行する場合などは注意してください。
API：.is() カテゴリ：Traversing（トラバーシング） > Filtering（フィルタリング）
※以下では、本稿の前後を合わせて5回分（第75回～第79回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
75. 現在の要素セットからm～n番目の要素を取得するには？（slice）
jQueryオブジェクトで保持している要素セットから、指定したm～n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
76. 要素セットからn番目の要素を取得するには？（eq）
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。
77. 要素セットから特定の子要素を持つ要素だけを取得するには？（has）
jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。
78. 【現在、表示中】≫ 要素セットに、指定された条件に合致する要素が含まれるかを判定するには？（is）
isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。
