jQueryでのDOM操作にはfilter()が便利ということに今更気づいた

お世話になることの多いNETTUTSで、jQueryのDOM検索効率化を上げるためのTipsが紹介されてました。
Quick Tip – jQuery Newbs: Stop Jumping in the Pool

内容はすっごく基本的なことなのだけど、
filter()の便利な使い方について言及されてたので自分用メモ。

基本的なjQueryのDOMの検索の書き方のお作法について。
曰く、「DOMはプールと心得よ！」とのこと。。

要は、「$(".target")とかをキャッシュせずに至る所に書いちゃうと、その度、プールに落ちた小さなコインを見つけるために飛び込ませているのと同じ事になるよ。これって無駄だよねぇ。。」と。

ajaxで中身を入れ替えるコンテンツなんかでは、入れ替えたあとに再キャッシュ、またはlive()などを使うなどの一部例外はありますが、この例え方はなるほどーって思いました。

最も、そんな非情なコードを書いても、最近のブラウザは早いのでそれを体感ではほぼわからないレベルにしてくれていますが(例の青いブラウザは除く)。

でも、速度のためというより、純粋に後の自分のために、わかりやすいコードで書いたほうが幸せになれるよねって考え方には共感できます。

で、そんなことを思いながらぼーっと記事を見てたのですが、最後のほうで、あれっ？て思う方法が紹介されてました。

クリーン化前

var tabs = $('.tabs li');
 
tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} );
});

クリーン化後

var tabs = $('.tabs li');
 
tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} );
});

...ですよね。.filter()で絞ったほうがいいですよねーーー。

キャッシュしておいた$('.tabs li')の中から、clickイベントが発生したliだけをfilter()で返してもらえば、クリックした要素をいちいち"var tab = $(this);"とキャッシュしなくていいという事ですね。

実際使用するときは、".tabs"はあくまでスタイル用にして、IDも別に"#navTabs"とか付けて、var tabs = $("#navTabs").find("li")　にしたら、より高速化が図れますね。

ってかこういうのは基礎だろと自分に突っ込みつつ。