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

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

Posted at November 10,2011 1:55 AM
Tag:[jQuery]

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

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

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

1.問題

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

注:マークアップが階層状になっていませんが、操作対象のページのマークアップ(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要素を特定します。

2.解決方法1

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

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

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

3.解決方法2

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメント

マークアップが階層構造になっていないのは変だと思います。

[1] Posted by シマダ : November 10, 2011 10:43 AM

>シマダさん
こんばんは。
ご指摘ありがとうございます。
CMSから出力されたマークアップをそのまま使っています。変なのは仰るとおりですがそこは大目に見てやってください。とりあえず本文にはその旨を追記しました。
それではよろしくお願い致します。

[2] Posted by yujiro logo : November 10, 2011 10:30 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)