jQueryのfilterとfindの違い

jQueryで要素を対象要素を絞ろうと思ったときに限って、idで抜き出すのが難しかったりする。
そんなとき便利なのが、findメソッドとfilterメソッド。
けど、この２つは一見非常に良く似ている。ここに違いをメモしておく。

次のようなHTMLがあったとします。

<div>hgoe1</div>

<div>hgoe2</div>

<div>hgoe3</div>

<div class="hoge">hgoe4</div>

<div>
    <span class="hoge">hgoe5</span>
</div>

そこからfilterメソッドとfindメソッドでそれぞれ要素を抽出し、
抽出された要素からclass="hoge"のものを抜き出して処理を行います。

$(function() {
    // filterメソッド
    $('div').filter(function (index) {
        return $(this).hasClass('hoge');
    })
    .css("background-color", "blue");

    // findメソッド。
    $('div').find('.hoge').css("background-color", "red");
});

上記のjsを適用すると次のようになる。

・青枠の要素が、$('div').filterメソッドで絞り込んだ要素。
div要素の中からclass="hoge"の要素を返す。

・緑枠の要素が、$('div').findメソッドで絞り込んだ要素。
divの子要素からclass="hoge"の要素を返す。

<div>hgoe1</div>
<div>hgoe2</div>
<div>hgoe3</div>
<div class="hoge">hgoe4</div>
<div><span class="hoge">hgoe5</span></div>

ちなみに、jQueryオブジェクトはDOM要素の集合をスタックで持っています。
多くのjQueryメソッドは、呼び出し時の状態をスタックに保存した上でDOM操作を行います。

使いどころさえ間違わなければ、とても便利に使えそうだ。