浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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では”~の要素の親”や”~の要素の子”、”~の要素の次の要素”のような指定ができるセレクタが用意されています。

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

$("#test1").parent().処理;

とすることで、idが”test1″の要素の親の要素、つまり目的のtr要素を指定することができます。
逆に子要素を指定する場合

$("#test3").children().処理;

などとすると指定できます。

他にもjQueryにはいろいろな要素の指定ができます。
こちらのサイトに詳しく書いている方がいましたので是非参考にしてみてください。

jQueryのセレクタメモ – Qiita

  • この記事いいね! (0)