jQueryのいろいろな指定│株式会社シーポイントラボ

jQueryを使用するいい点として、DOM(HTML)の操作が簡単になるという利点があります。

jQueryで各要素に対して処理を書く際、どの要素に対して操作を有効にするのか、という指定は”セレクタ”を用いて行います。

//DOMのidで指定
$("#id").処理;

とか、

//DOMのクラスで指定
$(".class").処理;

のようにクラス、idで指定する方法や

$('table').処理;

のようにHTMLの要素で指定したりできます。
さて、次のようなHTMLがあるとします。

<html>
  <head><!-- hogehoge... --></head>
  <body>
    <table>
      <tr>
        <th>hoge1</th>
        <th>hoge2</th>
      </tr>
      <tr>
        <td id="test1">fuga1</td>
        <td id="test2">fuga2</td>
      </tr>
      <tr>
        <td id="test3"><a href="#">fuga3</a></td>
        <td id="test4">fuga4</td>
      </tr>   
    </table>
  </body>
</html>

少々雑な例ですが、こういったHTMLのページがあるとして、例えばtdのidがtest1、test2のものが入っているtrに対してのみ何か処理をしたい、という場合は、trにはidやclassが降られていないので、これらでは指定できませんし、tr要素を指定してしまうと無関係のidがtest3、test4であるtdが格納されているtrまで影響してしまいます。

生のHTMLであれば単純にtrにidやclassを指定すれば済むのですが、例えばこれがプログラムで生成しているDOM、特にライブラリやデザインフレームワークなどが生成しているような場合はそういった変更ができない場合があります。

こういった時に、jQueryでは”~の要素の親”や”~の要素の子”、”~の要素の次の要素”のような指定ができるセレクタが用意されています。

例えば今回の場合であれは、