jQueryでFilterする

 .filterなるAPIがありまして、かなり便利です。あるxhtmlタグのグループを寄せ集めて何らかのフィルタリングができるというものです。例ではわかりやすくliタグに行っておりますが、divでもinputでも何でもできます。同じオブジェクトに対していろいろなことを指定していろいろなことをやってあげるというものです。
 がさつなサンプルで申し訳ないです。
 これがなかなか粋でして、indexなる更なる便利なAPIがあって寄せ集めた要素に対してインデックス(番号)を割り振ることもできるんですね。すごいです。.filterは複数の要素を扱うのでindexとかeachとかと併用することが多いみたいです。
 サンプルのソースはjQuery日本語リファレンス(通称ヌーさん)のところのソースをちょっと改造しただけなんですが、入れ子の連続でありましてかなりわかりずらくなってしまいました。よくみると全部ネストされてます。
jQueryのコード
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
  $(function(){
    $("li").css("background", "#c1c1c1")
            .filter(function (index) {
                  return index == 0 || index == 5 || $(this).attr("id") == "fourth";
                })
            .css("background", "#f30");
  });
  </script>
xhtmlソース
<ul>
  <li id="first">リスト1</li>
  <li id="second">リスト2</li>
  <li id="third">リスト3</li>
  <li id="fourth">リスト4</li>
  <li id="fifth">リスト5</li>
  <li id="sixth">リスト6</li>
 <ul>

$(function(){ //*1
    $("li").css("background", "#c1c1c1") //*2
            .filter(function (index) {//*3
                  return index == 0 || index == 5 || $(this).attr("id") == "fourth";//*4
                })
            .css("background", "#f30");
  });//*1
*1の部分はいつもの定形という感じで、その次(*2)にliのcssの値を設定しております。見ての通り#c1c1c1に背景色を指定しているわけです。その#c1c1c1で背景色を指定いた要素、つまりliの要素に対して.filterしているという形になっています。filterしたものは、function (index)でもってインデックスの分析(*3)をします。インデックスの戻り値がない場合は何もせずにスルー、インデクスの値が0と5(リスト中の1番目と4番目)とIDがfourthの時だけ背景を赤にしなさい(*4)...ということになっています。
 なんかPerlとかPHPになれているので複数の値を扱う時は思わずループしないと気が休まらない自分がいますが、ただのネストでできちゃうんですね。






プロフィール



  • Name :: 山上オサム ♂(37)
  • Hobby :: 武術
  • Work :: Web Designer