TopJavaScriptjQuery > 2011年11月
2011年11月10日

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

November 10,2011 1:55 AM
Tag:[]
Permalink

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な方々の添削をお待ちしています。

Comments [2] | Trackbacks [0]
2011年11月 2日

jQueryでテーブルに行を追加する方法

November 2,2011 1:55 AM
Tag:[, ]
Permalink

jQueryでテーブル(table要素)に行を追加する方法を紹介します。

テーブル操作は、テーブル系のjQueryプラグインで色々なことが実現できると思いますが、業務で使っているツールでこの機能がピンポイントで必要になったため自力で作りました。

単に追加するだけであれば後述するappend()とprepend()で大丈夫です。ただアニメーション表示する方法についてはネットで色々探しましたが同様の情報がなかったので試行錯誤して作りました。テーブルを操作する場合の参考になれば幸いです。

1.サンプル

まずはサンプルで動作をご確認ください。

jQueryでtableに行を追加するサンプル
サンプル

サンプルでは行の追加・削除・全削除が行えます。

2.テーブルの先頭に行を追加する

行をtable要素の先頭に追加するには次のように記述します。

$('tbody').prepend('<tr><td>~</td></tr>');

当初、次のような実装をしていましたが、prepend()で問題ありません。

$('tbody tr:first').before('<tr><td>~</td></tr>');

「tbody tr:first」は、tbody要素の子要素であるtr要素の先頭の要素を指します。「before」はその直前にデータを追加するメソッドです。

3.テーブルの最後に行を追加する

行をtable要素の最後に追加するには、次のように記述します。

$('tbody').append('<tr><td>~</td></tr>');

当初、次のような実装をしていましたが、append()で問題ありません。

$('tbody tr:last').after('<tr><td>~</td></tr>');

「tbody tr:last」は、tbody要素の子要素であるtr要素の最後の要素を指します。「after」はその直後にデータを追加するメソッドです。

4.tr要素の有無を判定する

2項・3項で「tbody tr:first」や「tbody tr:last」を利用する場合、tbodyにtr要素がひとつもない場合は正常に動作しないため、tr要素の有無を判定して挿入するコードを切り替える必要があります。tr要素の有無を判定するには、例えば次の方法があります。

if (jQuery('tbody tr').length) {
    // tr要素がある場合の処理
} else {
    // tr要素がない場合の処理
}

append()とprepend()を利用すればこのような判定は不要です。

5.アニメーションで行を追加する

一番苦労したのがこの部分です。先頭に追加する場合のjQueryは次のように記述します。

jQuery('tbody').prepend(data);
jQuery('td div').slideDown("fast");

挿入するHTML(上記サンプルの「data」の部分)がキモで、次のようにtd要素の中にdiv要素を仕込みます。

<tr>
  <td><div style="display:none">テキスト1</div></td>
  <td><div style="display:none">テキスト2</div></td>
  <td><div style="display:none">テキスト3</div></td>
</tr>

そして、div要素に対してslideDown()を実行することで、アニメーションを実現します。これはtr要素やtd要素に対してslideDown()を実行しても期待通りの動作にならないためです。

アニメーション表示する場合は、さらにdiv要素に「display:none」を与えておきます。ここではstyle属性で記述していますが、実際にはdiv要素セレクタにCSSを設定しておけばよいでしょう。displayプロパティは、slideDown()を実行したときに自動的に「block」になるようです。

2011.11.02
2項と3項の内容を修正しました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3