第3回 トラバーシング編連載:jQuery逆引きリファレンス(7/15 ページ)

» 2009年12月21日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 isメソッドは、要素セット(jQueryオブジェクト)に、セレクタ式で指定された条件に合致する要素が存在するかを判定し、その結果をtrue/falseで返します*1

*1 対象の要素セットに複数の要素が含まれる場合には、それら要素のうちの1つでも条件に合致すれば、isメソッドはtrueを返します。


 具体的なサンプルも見てみましょう。以下は、<div>要素で定義された領域をクリックすると、class属性が「correct」であるものは緑色に、それ以外のものは赤色に背景色を変化させる例です(簡単なクイズ・アプリです)。

<style type="text/css">
.box
{
  height:50px;
  width:50px;
  float:left;
  margin-left:10px;
  background-color: Yellow;
}
</style>

……中略……

<script type="text/javascript">

$(function() {

  // <div>要素をクリックしたときの挙動を定義
  $('div').click(function() {

    // その要素がclass属性としてcorrectを持つか
    if ($(this).is('.correct')) {

      // 持つ場合は背景を緑に
      $(this).css('background-color', 'Lime');
    } else {

      // 持たない場合は背景を赤に
      $(this).css('background-color', 'Red');
    }
  });
});

</script>

……中略……

サザエさんの弟に当たるのは?
<div class="box">ナミヘイ</div>
<div class="box">タラオ</div>
<div class="box correct">カツオ</div>

リスト052 正解のボックスをクリックすると、ボックスの背景色が緑色に(Is.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

初期状態



正解の場合


不正解の場合

リスト052の実行結果


 なお、jQuery 1.3からはセレクタ式に+や>、のような階層を表す書式も指定できるようになりました(1.2以前の環境では、これらの式に対しては常にtrueを返していました)。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。