Re:jQueryでセレクタを再指定する方法

ネタ元：jQueryでセレクタを再指定する方法: 小粋空間

なんとなく呼ばれた感じがしたので添削というか、私ならこう書くかなというところで。

※2011/11/10 $(foos)って間違ってない?という指摘を受けて訂正、jQueryオブジェクトを再評価する必要ないですね。
※2011/11/11 aをクリックした際にも変化するよと指摘を受けて修正、eqメソッドがjQuery1.4からマイナスにも対応してたんですね。

(function($){
	$(document).on("change","input.foo",function(){
		var foos = $("input.foo");
		var index = foos.index(this)
		if(index>0){
			var prevInput = foos.eq(index-1);
			if($(this).prop("checked")){
				prevInput.attr('checked','checked');
			}else{
				prevInput.removeAttr('checked');
			}
		}
	});
})(jQuery);

サンプル (変更前)

元ネタは一つ前のinput要素にチェックを付けるだけなんだけどもチェックを外す機能も付けておきました。

ポイントは次の点。

DOM READYイベントは必要な時しか利用しない

$(function(){...});のDOM READYイベントはHTMLが全て読み込まれてから実行されるので処理が少し遅いです。必要ないときは利用しないようにしましょう。スコープが必要な場合は(function(){...})()を利用するとよいです。jQueryオブジェクトとして$ではなくjQueryを利用したい場合は(function($){...})(jQuery)としておくことでコードなかでは$としてjQueryなjQueryオブジェクトを利用することができます。

イベントはデリゲートする

元ネタでは$(".foo")にchangeイベントを設定している都合上「DOM READY」イベントが必要になってきます。ただし、これは「DOM READY」にバインドしてから指定の要素にバインドするといった具合に無駄なプロセスが発生しています。delegateメソッド改めonメソッド(jQuery1.7から登場)を利用してイベントをバインドしましょう。documentにバインドすればDOM READYを待たずにイベント設定が可能です。

DOM構造の変化に柔軟に対応できるよう

元ネタでは.parent().parent().prev().find(".foo")といった感じで親の親の次の中にある.fooといった具合にDOM構造に依存した形で要素の検索を行っています。ここはシンプルに一個前の「.foo」として要素を検索しましょう。そうするとDOM構造が変化しても「.foo」のルールさえ変わらなければ検索可能です。

var prevInput = foos.eq(foos.index(this)-1);

propメソッドでcheckedかチェック

jQuery1.6で追加されたのものの意外と知られていないマイナーメソッドのporp。最近ですとこいつでチェックボックスにチェックが入っているかどうかがチェックできます。

こんな感じでどうでしょうか?

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
8のjQueryのすごいTIPS

スポンサードリンク

«background-sizeとグラデーション | メイン | display:noneの要素にGoogle Mapsを貼り付ける»