Webページ上の<li>リストなど、
いくつも同じ要素が繰り返されるものに対して、
jQueryを使って、特定の(n)番目の物に処理を加えられる
「:nth-child()」のちょっと便利な使い方の紹介をしてみます。

「:nth-child()」の基礎的な使い方としては
連続している要素のn番目の要素に対して
特定の処理を加えられるというもの。

例えば下記の様なリストがあった場合、

◆HTML【SAMPLE01】
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

このリストの3番目の要素のみに
背景色を変えるスクリプトを実行させる場合。

◆SCRIPT【SAMPLE01】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('ul li:nth-child(3)').each(function(){
		$(this).css({background: '#ccc'});
	})
});
</script>

この様な「:nth-child(*)」といった記述をすることで、
3番目のリストのみに任意の処理を加えることが可能になります。

実行すると以下の様な感じになります。

jQuery :nth-child(n)【SAMPLE01】

「:nth-child()」はこの様なn番目に処理を与えるというものだけでなく
決められた(n)倍数の要素に対して処理を加えられる、という便利な方法があります。

例えば下記の様なリストがあった場合、

◆HTML【SAMPLE02】
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>

このリストの3の倍数の要素、全てに対して
背景色を変えるスクリプトを実行させる場合。

◆SCRIPT【SAMPLE02】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('ul li:nth-child(3n)').each(function(){
		$(this).css({background: '#ccc'});
	})
});
</script>

この様な「:nth-child(*n)」といった記述をすることで、
3の倍数のリストに任意の処理を加えることが可能になります。

実行すると以下の様な感じになります。

jQuery :nth-child(n)【SAMPLE02】

この(n)倍数に対して処理を加えられる方法は、
いくつもの連続したリストを左右に余白を付けてfloatで回り込ませた際、
端の要素に対しては余白を付けたくない、といった場面で便利に使えたりします。

例えば下記の様なリストがあり、

◆HTML【SAMPLE03】
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div><!--/#box-->

CSSのfloatで各リストを下記の様に回り込ませます。

◆CSS【SAMPLE03】
body {
	background: #aaa;
}
div#box {
	margin: 0 auto;
	width: 500px;
	text-align: left;
	background: #fff;
}
ul {
	width: 500px;
	text-align: left;
}
li {
	margin: 0 25px 25px 0;
	padding: 30px 0;
	width: 150px;
	text-align: center;
	float: left;
	background: #ccc;
	display: inline;
}

/* Clearfix */
div#box:before,
div#box:after {
	content:"";
	display:table;
}
div#box:after {clear:both;}
div#box {zoom:1;}

回り込ませたそれぞれのリストには
右側に「margin-right:25px」が聞いていますが
ちょうど全体が折り返される3の倍数のリストに対しては
「:nth-child(*n)」を使って右側のマージンを無くすことが出来ます。

◆SCRIPT【SAMPLE03】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('ul li:nth-child(3n)').each(function(){
		$(this).css({marginRight: '0'});
	})
});
</script>

実行すると以下の様な感じになります。

jQuery :nth-child(n)【SAMPLE03】

わざわざ折り返し部分のリストに対してクラスを付けたりすることなく、
処理を加えることが可能になるので、ソースの記述も抑えることが可能になったりもします。

工夫することでもっといろいろ使いやすい方法もあるので
「:nth-child()」を使ってHTMLソースの軽減を図るといいかもしれません。

ご参考までに。。。

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

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

Related Posts

Comments (0)







コメント内容

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

jQueryで(n)番目(n倍数)の特定要素に処理を加える「:nth-child()」のちょっと便利な使い方

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner