end() - うなの日記

end()を使うと、直前の操作対象変更操作( add,filterなどTraversingのAPI呼び出し )をキャンセルできます。利用例は以下。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="./jquery-1.3.2.js"></script>
  <script type="text/javascript">
    $(function(){


      $("li")                         // li要素を全て選択
      .css({ listStyle: "none" })     // ラインスタイルを設定
      .filter( ":contains('mii')" )   // liの一覧中で中身が"mii"のものを取り出して、
        .css({ fontWeight : "bold" }) //   ボールドに変更
      .end()                          // "mii"での絞り込みを解除
      .filter( ":odd" )               // liの一覧中で偶数番目のものを取り出して、
        .filter( ":odd" )             //   そのうちさらに偶数番目のものを選択して、
          .css({ color : "#6666cc" }) // 　  色を変更
        .end()                        //   絞り込みをキャンセル
        .filter( ":even" )            //   奇数番目のものを選択して、
          .css({ color : "#66cc66" }) // 　  色を変更
        .end()
      .end();

      // ↑は以下と同じ。
      // var lis = $("li").css({ listStyle: "none" });
      // lis.filter( ":contains('mii')" ).css({ fontWeight : "bold" });
      //
      // var odds = lis.filter( ":odd" );
      // odds.filter( ":odd"  ).css({ color : "#6666cc" });
      // odds.filter( ":even" ).css({ color : "#66cc66" });

    });
  </script>
</head>
<body>
  <ul>
    <li>mii</li>
    <li>tora</li>
    <li>shiro</li>
    <li>kuro</li>
    <li>mike</li>
    <li>jiji</li>
  </ul>
</body>
</html>

実行結果はこちら

んー、APIとしてはちょい新しいなー。この発想は無かった。とはいえ、ちゃんとインデントしないと読めたものじゃない気がするので、実際には、

var lis = $("li").css({ listStyle: "none" });
lis.filter( ":contains('mii')" ).css({ fontWeight : "bold" });

var odds = lis.filter( ":odd" );
odds.filter( ":odd"  ).css({ color : "#6666cc" });
odds.filter( ":even" ).css({ color : "#66cc66" });

を使いそうだけど。