[jquery] jqueryで連番を振った要素に表示・非表示の切り替えを実装する

jqueryを使ったdivの表示・非表示ですが単発処理の紹介はググればよく目にしますがそれを効率的に複数の要素に処理させたかったのでググってみたもののなかなか芯を食った情報に出会えず。。。ということで自分で作ったコードをとりあえずアップしておきます。やりたかったのは下記です。

  デモ:jqueryで連番を振った要素に表示・非表示の切り替えを実装する

簡単に解説するとある入力情報の確認画面と入力画面をjqueryで切り替えて画面遷移することなく管理しようとしたものです。このような際に面倒なのがtrごとにクラスを振って、あるtrの「変更」をクリックした時はそのtrの内容が表示・非表示で切り替わるように各々に実装する必要があります。trが数行レベルならコピペ&リネームでいいかもしれませんが10行20行…N行となれば気が遠くなります。そこでそんな処理を自動でやってくれるようにしたのがデモのコードになります。重要な箇所だけをかい摘んで解説します。

まず、jqueryの$().eachメソッドを使ってtrの数を取得して変数iに渡しておきます。そして$().attrメソッドを使ってtrに対して連番クラスを振っています。その際に変数iは0から始まるのでi+1でiを1から開始するようにします。

$('#container tr').each(function(i){
  $(this).attr('class','item_' + (i+1));
});

こうすることでHTML内のtrタグに連番のクラス定義を自動でしてくれます。上記の実行結果のイメージはこんな感じです。

<tr class="item_1">〜</tr>
<tr class="item_2">〜</tr>
・
・
・
<tr class="item_○">〜</tr>

あとはjqueryのdivの表示・非表示の処理を連番要素に対して応じるようセットするだけです。

$("#container tr").each(function (i) {
  i = i+1;
  //変更をクリックしたときの処理
  $('.item_' + i + ' .change span').click(function() {
    //変更をクリックしたときの表示・非表示処理
  });
  //保存orキャンセルをクリックしたときの処理
  $('.item_' + i + ' .edit span').click(function() {
    //保存orキャンセルをクリックしたときの処理
  });
});

これで連番を振った要素に対してdivの表示・非表示を効率よく管理できます。 jqueryに精通した人だったらもっと効率的な手法で書けるのかもしれませんが上記の大枠のコードを使ってカスタムすれば色々なシーンで使えそうなコードだと思うので一応アップしてみました。もしご興味ある方はデモのコードをコピペして使ってください。

  • 2012.01.13
  • お仕事っぽいこと