【ワテのjQuery講座】.closest()を使うと直近の祖先を探してくれる【便利やんけ!!】

この記事は約5分で読めます。
スポンサーリンク

例えば、htmlページの中にテーブルを作成して、その中にcheckboxが有る例を考える。

こんな感じか。

 

<table>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>カラム1</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>カラム2</td>
    </tr>
  </tbody>
</table>

 

描画するとこんな感じ

 

カラム1
カラム2

 

さて、この時、チェックボックスがクリックされて☑がONになったら、その列の色を変えたい。

カラム1
カラム2

こんな感じにしたい。

 

そういう場合に、いろんなやり方が有ると思うが、まあjQuery初心者のワテの場合には、こんなコードを書いてみた。

$(document).ready(function () {
  $('table > tr > td > input[type=checkbox]').on('change', function (e) {
    var thisJQ = $(this); // thisはクリックされたcheckbox
    var trJQ1 = thisJQ.parent().parent();
    var trJQ2 = thisJQ.closest('tr');

    if (this.checked) {
      trJQ2.addClass('selectedRow');
    } else {
      trJQ2.removeClass('selectedRow');
    }
  })
});

 

つまり、チェックボックスの on changeイベントハンドラー関数に於いて、

    var thisJQ = $(this); // thisはクリックされたcheckbox

でthisJQを作成しておいて、

    var trJQ1 = thisJQ.parent().parent(); 

あとは、一つparent()を遡ると td、もう一つparent()を遡ると tr が得られる。

その trJQ1に対して、selectedRowクラスをadd/remove すれば良い。

selectedRowクラスは cssスタイルシートの中で、background-colorを好きな色に割り当てて置けば良い。

まあこれで上手く行くのだが、今日、もっと良い方法を覚えた。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

.closest(‘tr’) だ!

具体的には以下のように書ける。

 var trJQ2 = thisJQ.closest('tr');

つまり、チェックボックス thisJQ から祖先を遡り、最初に見つかった tr を返すのが closest() だ。

parent().parent() のように何世代まで遡る必要があるのかなどを意識しなくても良いのが便利。

例えば、もし、<span></soan>などが入って

<td><span><input type="checkbox" /></span></td>

とかになると、parent().parent().parent() のように三世代遡る必要があるだろう。

でも .closest(‘tr’) なら一発で行ける!!

まとめ

いや~、jQueryは奥が深い。

知らない事が沢山ある。

その結果、自己流でヘンテコな関数をシコシコ苦労して作ってデバッグにも苦労して、やっと完成したと思ったら、良く調べてみたら、同じ機能を持つjQueryのメソッドが有るやん!

みたいな経験も何度かある。

骨折り損のくたびれ儲けと言うヤツか。

そう言う無駄を避ける為にも、今学習中の言語に関しては、兎に角一冊本を読んでおいて、どういう文法が有るのかと言う事を頭に入れておくと良いだろう。

全部記憶出来ればそれは良いが、普通の人は丸暗記は難しい。

でも、頭の片隅にでも記憶が残っていれば、「確か、こんな場合にはあの関数が使えるんじゃないかなあ!?」なんて閃く場合もある。

そうすると自作で無駄な関数を作成する必要もなく、開発期間も短縮出来る。

 

jQueryの本を読む

この二冊はアマゾンランキングも高い。よく見かける本だ。

 

一方、これは何?

ほんまに5倍早くなるのか?

誰かが測定したのか?

ネバダ州ラスベガス研究会って何やねん?

そっちのほうが気になる。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

CSSHTMLJavaScriptjQuery生活
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント