読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

Traversingを使う簡単なサンプル

JavaScript jQuery

TraversingAPIを使うと、

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

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

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

ということで以下はTraversingAPIを使う簡単なサンプルです。

セレクタで選択した要素の一覧を順次絞り込みつつ、操作を行なう

<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>

実行結果はこちら