Traversingを使う簡単なサンプル

セレクタで選択した要素の一覧をさらに絞り込む
セレクタで選択した要素の一覧を統合する

といった操作が可能です。

機能的にはセレクタの指定を工夫することで実現できそうなものが多いですが、セレクタでがんばりすぎると後で読めなくなる可能性が高いので、そういう場合は適度にTraversingを使って指定を分割するとわかりやすいかな。

ということで以下は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(){

      // 1.li要素を全て選択して、リストのスタイルを変更。
      // 2.偶数番目の要素で絞り込んで色を変更。
      // 3.さらに、偶数番目の要素の先頭をボールドにする。
      $("li").css({
        listStyle: "none"
      }).filter( ":odd" ).css({
        color : "#6666cc"
      }).eq(0).css({
        fontWeight : "bold"
      });

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

実行結果はこちら

セレクタで選択した要素一覧を統合して、一括操作する

<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(){

      // 内容に'mii'を含むli要素とshiroを含むli要素の色を変更
      $("li:contains('mii')").add("li:contains('shiro')").css({
        color : "#6666cc"
      });
      // これは↓と同じ。
      //$("li:contains('mii'), li:contains('shiro')").css({
      //  color : "#6666cc"
      //});

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

実行結果はこちら