たぶん jQuery を使い始めたばかりの人はあまり使わないであろう .end() メソッドですが、これ、かなり便利なんですよね。

僕も最初はあまり使っていませんでしたが、最近は積極的に使っています。ソースも短くかけるうえに、パフォーマンス的にも良いので是非使っていきたいメソッドです。

今回は、簡単な例で .end() を紹介してみます。

今、次のようなソースがあるとします。アコーディオンさせる場所などで良く見そうなソースです。

<dl id="hoge">
 <dt>.end()を使う</dt>
 <dd>
 <ul>
 <li>list 1</li>
 <li>list 2</li>
 <li>list 3</li>
 <li>list 4</li>
 <li>list 5</li>
 </ul>
 </dd>
</dl>

このような html に対して、次のような操作を行いたいとします。

1. dt 内のテキストを strong で囲む
2. li#list3 を赤字にする
3. ul 全体を線で囲む

これを、一つずつ実行すると次のようなコードになると思います。

$("#hoge dt").wrapInner("<strong></strong>");
$("#hoge li:eq(2)").css("color","#ff0000");
$("#hoge ul").css("border","1px solid #000000");

.end()を使う

• list 1
• list 2
• list 3
• list 4
• list 5

しかし、これだと、ブラウザはドキュメント全体から３回も要素を探さなければなりません。ブラウザは大変です。

そこで、要素探しは１回にして、後はその見つけた要素の中で済ませてあげれが、ブラウザは大分楽になります（今は単純な例なのでそんなに差はないですけど）。

ここで「.end()」の登場です。

.end() は、jQuery でメソッドチェーンで色々操作していく中で、その一つ前の要素セットに戻ることができるメソッドです。この .end() を使うと、先ほどのコードは次のようになります。

$("#hoge")
 .children("dt")
 .wrapInner("<strong></strong>")
 .end()
 .find("ul")
 .find("li:eq(2)")
 .css("color","#ff0000")
 .end()
 .css("border","1px solid #000000");

.end()を使う

• list 1
• list 2
• list 3
• list 4
• list 5

Safariで、それぞれの処理時間を計ってみましたが、最初の書き方は平均 8ミリ秒、.end() を使った書き方は平均 2ミリ秒でした。これだけだと大したことないですが、塵も積もればなんとやら。

また、この例では、ソースを見やすくするために改行を入れているので、あまり「短く書ける」ってメリットは実感できないですね（細かいことを言えば、.end()を使わなくても別の書き方でメソッドチェーンすることも可能ですが）。

しかし、このような書き方をすることで、なんとなくhtmlの要素の入れ子と似た感じになるし、僕はこの書き方を積極的に取り入れています。

.end() は少しイメージしにくいのですが、.end() にスポットを当てて見てみると、下の図のように赤で囲ってあるところがある要素セットに対する操作だということになりますね。

慣れれば見やすいです。

ただし、.end() に限ったことではないのですが、メソッドチェーンはデバッグしにくくなるというデメリットもあるので、そこは意識しておきましょう。

以上です。