.end()

http://api.jquery.com/end/

.end( ) 1.0追加
補足事項
デモ

.end( ) 1.0追加

戻り値:jQuery

最新のフィルタリング処理を破棄し、一つ前の選択状態に戻します。

例えば、下記のようなコードがあった場合、

<ul class="first">
   <li class="foo">リスト項目 1</li>
   <li>リスト項目 2</li>
   <li class="bar">リスト項目 3</li>
</ul>
<ul class="second">
   <li class="foo">リスト項目 1</li>
   <li>リスト項目 2</li>
   <li class="bar">リスト項目 3</li>
</ul>

.end()はjQueryのメソッドチェーンが途中で分断されてしまう際に有用です。次の処理は下記のような順序で実行されます。

$('ul.first')によって１つ目のUL要素を選択
選択中のUL要素内からfooクラスを探し、該当するリスト項目1を選択して背景を赤に変更
.end()によって、一つ前に選択していたUL要素を再び選択
選択中のUL要素内からbarクラスを探し、該当するリスト項目3を選択して背景を緑に変更

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

補足事項

jQueryでメソッドチェーンのコードを書く際に、 .find()のようにフィルタリングをするメソッドではインデントを下げ、.end()ではインデントを戻し、コードブロックを視覚的に見やすくするための工夫が行われています。最後の.end()は不要な処理ですが、ブロックを見やすくするために追加されています。

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

デモ

ボーダーを赤で囲う処理をandSelf()を使用して、背景を黄色いする処理は使用していません。 DIV要素とP要素が赤で囲われているのに対し、背景はP要素しか黄色くなっていないことに注意してください。

<!DOCTYPE html>
<html>
<head>
  <style>
  body {font-size:12px;}
  p, div { margin:1px; padding:1px; font-weight:bold;
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
    やあ、 <span>調子</span> は <span>どうだい</span>?
  </p>
  <p>
    この <span>SPAN</span> は
    <span>文章中の</span>いくつかの
    <span>SPAN</span>の中の１つです。
  </p>
  <div>
    最初にマッチしたタグ: <b></b><!-- .showTags(0) -->
  </div>
  <div>
    findによってマッチしたタグ: <b></b><!-- .showTags(1) -->
  </div>
  <div>
    endによってマッチしたタグ: <b></b><!-- .showTags(2) -->
  </div>
<script>
  jQuery.fn.showTags = function (n) {
    var tags = this.map(function () {
                            return this.tagName;
                          })
                      .get().join(", ");
    $("b:eq(" + n + ")").text(tags);
    return this;
  };
  $("p").showTags(0)
        .find("span")
        .showTags(1)
        .css("background", "yellow")  //P要素内のSPAN要素が対象
        .end()
        .showTags(2)
        .css("font-style", "italic"); //end()によりP要素全体が対象
</script>
</body>
</html>