jQuery - 基本フィルター

公開日:2018-12-10 更新日:2019-05-14
[jQuery]

1. 概要

基本フィルターで要素を指定します。
セレクタで指定された要素を、さらに絞り込みます。

インデックスは、要素に付与される 0 から始まる連番です。階層ごとに新しく付与されます。
$("セレクタ:first")            //最初に見つかった先頭の要素
$("セレクタ:last")             //最初に見つかった最後の要素
$("セレクタ:even")             //インデックスが偶数の要素
$("セレクタ:odd")              //インデックスが奇数の要素
$("セレクタ:eq(インデックス)") //指定したインデックスの要素
$("セレクタ:lt(インデックス)") //指定したインデックス未満の要素
$("セレクタ:gt(インデックス)") //指定したインデックスより大きい要素
$("セレクタ:not(セレクタ)")    //指定したセレクタに該当しない要素

2.1 サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <div id="a">
    <div id="a0">A-0</div>
    <div id="a1">A-1</div>
    <div id="a2">A-2</div>
    <div id="a3">A-3</div>
    <div id="a4">A-4</div>
    <div id="a5">A-5</div>
    <div id="a6">A-6</div>
    <div id="a7">A-7</div>
    <div id="a8">A-8</div>
    <div id="a9">A-9</div>
  </div>
  
  <!-- Script -->
  <script>
    $(function(){
      //対象:先頭
      $("#a div:first").css("color", "red");

      //対象:最後
      $("#a div:last" ).css("color", "yellow");

      //対象:偶数番目の要素 (0から始まるので要注意)
      $("#a div:even" ).css("background-color", "#333");

      //対象:奇数番目の要素
      $("#a div:odd" ).css("background-color", "#003");

      //対象:5番目
      $("#a div:eq(5)" ).css("font-size", "28px");

      //対象:0 ~ 4番目
      $("#a div:lt(5)" ).css("font-size", "12px");

      //対象:6番目~
      $("#a div:gt(5)" ).css("font-size", "18px");

    });
  </script>

</body></html>


実行結果:画面


2.2 サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <div id="a">
    <div class="info">A-0</div>
    <div class="info">A-1</div>
    <div class="info">A-2</div>
    <div class="info">A-3</div>
    <div>A-4</div>
    <div>A-5</div>
    <div>A-6</div>
    <div>A-7</div>
  </div>
  <div id="b">
    <div class="info">B-0</div>
    <div>B-1</div>
  </div>
  
  <!-- Script -->
  <script>
    $(function(){

      //対象:#a div と同じ階層にある .info
      $("#a .info").css("color", "yellow");

      //対象:#a div と同じ階層にある .info 以外
      $("#a div:not(.info)").css("color", "red");

    });
  </script>

</body></html>


実行結果:画面


2.3 サンプル

フィルターを2回使って、<td>だけ1行毎に色を付けています。
今回は2つ目のフィルターに :has() を使っているため問題ありませんが、:eq() などでインデックスを指定する場合は、絞り込まれた後のインデックスを指定する必要があるため、要注意です。
また、css の nth-child() でも1行毎に色付けができますが、インデックスではなく、何番目かで指定するため、奇数・偶数の意味が逆になります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <style>
    table { border-collapse:collapse; }
    th { background-color:blue; }
    th,td { padding:2px 16px; border:1px solid white;}

    tr:nth-child(1) { font-size:32px; }
    tr:nth-child(even) { background-color:#aaa; }
  </style>

  <!-- 画面 -->
  <table style="">
    <tr>
      <th>商品名</th>
      <th>値段</th>
    </tr>
    <tr>
      <td>りんご</td>
      <td>30</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>50</td>
    </tr>
    <tr>
      <td>ぶどう</td>
      <td>70</td>
    </tr>
    <tr>
      <td>すいか</td>
      <td>100</td>
    </tr>
    <tr>
      <td>メロン</td>
      <td>120</td>
    </tr>
    <tr>
      <td>イチゴ</td>
      <td>140</td>
    </tr>
  </table>
  
  <!-- Script -->
  <script>
    $(function(){
      //対象:<tr>のインデックスが偶数、かつ、<tr>を持つ要素 -> 背景をグレーにする
      $("table tr:even:has(td)").css("background-color", "#555");
    });
  </script>

</body></html>


実行結果:画面