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ソースの軽減を図るといいかもしれません。
ご参考までに。。。