somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【jQuery】CSSセレクタで取得した要素の中から条件に合う要素の存在を確認する

jQueryでで取得した要素の中から条件に合う要素の存在を確認する方法についてのメモです。

Javascriptの場合

特定IDのものを取得できない場合、ループなどで条件に合うかを調べなくてはなりません。特定IDの例は単体のチェックボックスのチェック状態です。ループの例は、複数のチェックボックスのチェック状態を調べる場合です。

var checkbox_list = document.getElementById('checkbox_outer');
var i, len;
for (i = 0, len = checkbox_list.length; i < len; i++) {
  if (checkbox_list[i].checked) {
    return true;
  }
}

return false;

存在の確認だけでこんなに処理を書く必要があります。

jQueryの場合:isメソッド

CSSセレクタ方式でループであろうと一括で調べることができます。ただし、調べるだけで要素を残す必要はない場合は戻り値が無駄になります。戻りではなく、存在の真偽のみを取得したい場合は以下のようにします。

if ($('#checkbox_outer').is(':checked')) {
  // 処理
}

もちろん以下のようにしても大丈夫ですが、前述どおり戻り値が無駄になります。

if $('#checkbox_outer:checked')) {
  // 処理
}

jQueryの場合:おまけ(コンテキスト)

すでに#checkbox_outerを取得している場合、無駄にしないために、すでに取得している要素をコンテキストにすることもできます。

var context = $('#checkbox_outer');
if ($(':checked', context)) {
  // 処理
}

今回の場合ですとやっぱり無駄になりますが、この方法を知っておくことはとてもいいです。再度検索をせずに済むため、処理を効率化できます。