.is()

http://api.jquery.com/is/

要素の集合体が指定したセレクターにマッチしている、または指定した関数等の条件を満たしている場合にtrueを返します。

.is( selector ) 1.0追加
.is( function(index) ) 1.6追加
.is( jQuery object ) 1.6追加
.is( element ) 1.6追加
補足事項
デモ

.is( selector ) 1.0追加

戻り値:Boolean

引数	説明
selector	検証する要素をセレクタで指定します。

.is( function(index) ) 1.6追加

戻り値:Boolean

引数	説明
function(index)	検証する要素をDOM要素で指定します。

.is( jQuery object ) 1.6追加

戻り値:Boolean

引数	説明
jQuery object	検証する要素をjQueryオブジェクトで指定します。

.is( element ) 1.6追加

戻り値:Boolean

引数	説明
element	検証する要素をセレクタとコンテキストで指定します。

補足事項

他のフィルタリングメッソドとの違いは、.is()メソッドはjQueryオブジェクトを返さないという点です。このメソッドはjQueryオブジェクの変更なしに、対象の検査を検証をすることが可能です。

次のようなコードがあった場合、

<ul>
  <li>リスト <strong>項目 1</strong></li>
  <li><span>リスト 項目 2</span></li>
  <li>リスト 項目 3</li>
</ul>

下記の処理を実行してイベントハンドラを登録すると、クリックされた箇所がLI要素かどうかを調べ、 LI要素の場合のみ背景が赤くなります。 STRONG要素やSPAN要素の部分をクリックした場合は、処理がスキップされます。

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

jQuery1.7より前のバージョンでは、位置を表現するセレクタ(:first, :gt(), :even等)は .is()メソッドに渡されたjQueryオブジェクトに対しての位置であって、 Document内に対してではありませんでした。上記のHTMLの例ですと、$("li:first").is("li:last")はtrueを返しますが、 $("li:first-child").is("li:last-child")はfalseを返します。加えて、Sizzleのバグの影響で位置を表現するセレクタの動作が防がれており、この2つの要因によって、位置を表現するセレクタでのフィルタリング処理は使い物にならないものでした。

jQuery1.7以降では、位置を表現するセレクタはDocumentを対象とするようになりました。また検査対象はマッチしている要素セットの最初の要素が対象となります。そのため上記HTMLの例では、$("li:first").is("li:last")はfalseを返します。位置を表現するセレクタはjQuery独自の拡張であって、W3C標準ではありません。確実に実行したい場合は、W3C標準のセレクタを使用することをお勧めします。

引数に関数を指定する場合、その関数の戻り値がtrueであれば、同様に.is()の戻り値もtrueになります。例えば、次のようなコードがあった場合、

<ul>
  <li><strong>リスト</strong> 項目 1 - 1つのstrongタグ</li>
  <li><strong>リスト</strong> 項目 <strong>2</strong> - 2つの <span>strongタグ</span></li>
  <li>リスト 項目 3</li>
  <li>リスト 項目 4</li>
  <li>リスト 項目 5</li>
</ul>

下記の処理を実行してLI要素にClickイベントハンドラを登録すると、クリックした際に STRONG要素を2つ持つものであれば背景色は緑になり、そうでないものは背景色は赤になります。

$("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");
  }
});

デモ

各DIV要素をクリックした際に対象を検証して、それぞれのメッセージをP要素に出力します。

<!DOCTYPE html>
<html>
<head>
  <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="http://code.jquery.com/jquery-latest.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("1番目のDIVです。");
    } else if ($(this).is(".blue,.red")) {
      $("p").text("赤、または青のDIVです。");
    } else if ($(this).is(":contains('Peter')")) {
      $("p").text("Peterを含むDIVです。");
    } else {
      $("p").html("<em>特徴</em>の無いDIVです。");
    }
    $("p").hide().slideDown("slow");
    $(this).css({"border-style": "inset", cursor:"default"});
  });
</script>
</body>
</html>

対象のINPUT要素の親がFORMなので、trueを表示します。

<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.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>

対象のINPUT要素の親がFORM要素ではなくP要素なので、falseを表示します。

<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.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>

偶数番目のLI要素の背景色を水色にし、そのマッチ要素のセットをそのままクリックイベントハンドラ内の.is()の引数で使用しています。背景が水色のLI要素はクリックするとスライドアップし、それ以外のLI要素は背景を赤くします。

<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-latest.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", "#00FFFF");
  $('li').click(function() {
    var $li = $(this);
    if ( $li.is( $alt ) ) {
      $li.slideUp();
    } else {
      $li.css("background", "red");
    }
  });
</script>
</body>
</html>