以前ここで「jQueryでの連番要素を制御する方法」と題して、
jQueryで連番要素の制御を簡単に行う方法を紹介しましたが、
同じ様にjQueryを使って簡単に連番でのIDを追加したりクラスを追加したりする方法を紹介してみます。
例えば＜li＞を使ったリストを5行で用意します。
HTML側では＜li＞自体にはIDもクラスも付けません。
◆HTML【BASE】 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
そしてこれらのリストに対して、下記スクリプトを実行させることで
自動で連番でのクラスを追記することができます。
（クラス名は「.number1」～とします。）
◆SCRIPT【SAMPLE01】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').each(function(i){
$(this).attr('class','number' + (i+1));
});
});
</script>
上記のスクリプトを実行させることで
実際のHTML側は以下の様なクラスが自動で付与されます。
◆HTML【SAMPLE01 - 実行後】 <ul> <li class="number1"></li> <li class="number2"></li> <li class="number3"></li> <li class="number4"></li> <li class="number5"></li> </ul>
クラスではなくIDでナンバリングするには
下記の様なスクリプトになります。
（ID名は「#element1」～とします。）
◆SCRIPT【SAMPLE02】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').each(function(i){
$(this).attr('id','element' + (i+1));
});
});
</script>
このスクリプトを実行させることで
実際のHTML側は以下の様なIDが付与されます。
◆HTML【SAMPLE02 - 実行後】 <ul> <li id="element1"></li> <li id="element2"></li> <li id="element3"></li> <li id="element4"></li> <li id="element5"></li> </ul>
上記のクラスとID追加を一緒に混ぜて、
しかも＜li＞リスト内にテキストでナンバリングを追加する、という場合。
◆SCRIPT【SAMPLE03】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul li').each(function(i){
$(this).attr('class','number' + (i+1));
$(this).attr('id','element' + (i+1));
$(this).text('リストナンバー' + (i+1));
});
});
</script>
HTMLにはクラスとIDとテキストが追加され
下記の様なHTMLソースになります。
◆HTML【SAMPLE03 - 実行後】 <ul> <li class="number1" id="element1">リストナンバー1</li> <li class="number2" id="element2">リストナンバー2</li> <li class="number3" id="element3">リストナンバー3</li> <li class="number4" id="element4">リストナンバー4</li> <li class="number5" id="element5">リストナンバー5</li> </ul>
こんな感じで簡単に連番でのHTMLソースの制御が出来るようになります。
この方法はリストだけでなく、
連続した要素に関しては、どんなソースでも制御することが可能になります。
例えば表組み＜table＞で行ごとに、
行番号を追加するようなこともできます。
◆HTML【BASE】 <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
プレーンな＜table＞表組みソースの行指定＜tr＞に対して、
＜th＞を追加して、テキストでセル内に行番号を追加します。
◆SCRIPT【SAMPLE04】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('table tr').each(function(i){
$(this).prepend('<th>' + (i+1) + '</th>');
});
});
</script>
スクリプト実行後は下記の様なソースになります。
◆HTML【SAMPLE04 - 実行後】 <table> <tr> <th>1</th> <td></td> <td></td> </tr> <tr> <th>2</th> <td></td> <td></td> </tr> <tr> <th>3</th> <td></td> <td></td> </tr> <tr> <th>4</th> <td></td> <td></td> </tr> <tr> <th>5</th> <td></td> <td></td> </tr> </table>
こんな感じでjQueryで連番を制御して、
様々な形でナンバリングの追加が可能になります。
今回のスクリプトサンプルについては、
実行後の画面をここに掲載してもあまり意味がなさそうだったので
各ソースの掲載のみとしておきます。
サンプルで紹介したスクリプト例については、
下記リンクよりファイルをダウンロードできるので、
実際の動作を確認したい方は、ファイルをブラウザで開いた後に
実行後のソースをFirebug等で確認してみてください。
jQueryで連番制御をする際に是非。。。