jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素セットに、指定された条件に合致する要素が含まれるかを判定するには?(is)

2017年9月21日

isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。

  • このエントリーをはてなブックマークに追加

 isメソッドは、現在の要素セット(=jQueryオブジェクトで保持している要素群)に、条件に合致する要素が1つでも含まれているかを判定します*1。他の大部分のjQueryメソッドと異なり、isメソッドの戻り値はtruefalseである点に注意してください(jQueryオブジェクトではありません)。

  • *1 複数の要素が含まれる場合も、そのうちの1つだけでも条件に合致すればtrueを返します。

 以下に、具体的な例を見てみましょう。以下は、<div>要素のボックスをクリックした時、class属性が"correct"であれば「おめでとう、正解です!」、class属性が"incorrect"であれば「残念、不正解...」というダイアログを表示する簡易なクイズアプリです。

HTML
<!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>
isメソッドで条件に合致/不一致によってダイアログを変えるサンプル(is.html)
[味噌]をクリックした場合

[味噌]をクリックした場合

[醤油]をクリックした場合

[醤油]をクリックした場合

上から正解の場合、不正解の場合

位置を表すセレクターを利用するときの注意

 :first:gt:evenなど、位置によって要素を絞り込むフィルターは、jQuery 1.7の前後で挙動が異なる点に注意してください。例えば以下のようなコードをjQuery 1.7より前のバージョンで動作してみましょう。

HTML
<!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>
jQuery 1.7より前のバージョンで、位置を表すセレクターをisメソッドに渡した例(is_17.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前後で発生した挙動の変化についても言及する。

79. 親要素を削除するには?(unwrap)

現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!