小粋空間  -  a cheap joke and a play on words site

jQueryでセレクタを再指定する方法

jQueryでセレクタ指定で取得したjQueryオブジェクトを使って、さらにセレクタ指定を行う方法です。

追記：to-Rの西畑さんに添削して頂きました。ありがとうございます。

Re:jQueryでセレクタを再指定する方法

１．問題

次のように、チェックボックスを階層状に並べたマークアップを例に説明します。

注：マークアップが階層状になっていませんが、操作対象のページのマークアップ（CMSから出力されたもの）がそのようになっているのでそのまま掲載しています。

サンプル

マークアップ

<div class="list-item">
  <div style="margin-left:0px">
    <input type="checkbox" class="foo" id="id_1"> a
  </div>
</div>
<div class="list-item">
  <div style="margin-left:10px">
    <input type="checkbox" class="foo" id="id_2"> b
  </div>
</div>
<div class="list-item">
  <div style="margin-left:20px">
    <input type="checkbox" class="foo" id="id_3"> c
  </div>
</div>

やりたいことは、一番下にあるチェックボックスをチェックしたとき、そのひとつ上にある（＝上から2つめの）チェックボックスをチェックする、というものです。同様に、真ん中のチェックボックスをチェックすれば一番上のチェックボックスをチェックします。

ちなみに、チェックボックスをチェックしたときのイベント受け取りは次のように記述します。

jQuery(function(){
    jQuery(".foo").change(function(){
        // ...
    });
});

changeイベントのコールバック関数内で「jQuery(this)」を使えば、チェック対象のinput要素のjQueryオブジェクトが取得できます。そこを基点にしてひとつ上にあるinput要素を特定します。

２．解決方法1

一般的な方法として、find()を利用します。

jQuery(function(){
    jQuery(".foo").change(function(){
        jQuery(this)
          .parent().parent().prev().find(".foo")
            .attr('checked', 'checked');
    });
});

parent()やprev()で要素を移動したあとに赤色で示すfind()を利用すればセレクタで指定できます。

３．解決方法2

こちらはネットで調べてもあまりみつからなかったのですが、セレクタ指定の第2パラメータ（赤色部分）に「コンテキスト」を与える方法があります。

jQuery(function(){
    jQuery(".foo").change(function(){
        jQuery(".foo",
          jQuery(this).parent().parent().prev())
            .attr('checked', 'checked');
    });
});

コンテキストを指定することで、セレクタで検索する範囲を絞り込むことができます。

以上です。jQueryな方々の添削をお待ちしています。