以前ここで「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で連番制御をする際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでリストなどに連番でIDやクラスを追加(ナンバリング)する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR