WPで○○の倍数番目のリストに対してCSSを変更させる簡単なjquery

こんにちはHiroです！

WEB製作をしていて、ループの項目をCSSでfloatさせて横並びにさせたいことって良くあるんじゃないかと思います。
でも、リストの間にmarginを空けないとデザイン的に美しくないので、

リストにmargin-right:10px;等のスタイルをあてると思います。

でも、そうすると、
たとえば、4個目が一番右側に来るときは、

本当は、margin-right:10pxは付けたくないんですが、
WPのループ処理で自動でどんどん出来てくる場合は、
HTMLでstyleを手動でつけられません。

でも、簡単なjqueryの記述を書くだけで、

たとえば、4個並んで、段を変えて下の段にしたい場合、
4個目、8個目、12個目・・・と４の倍数のリストに対して、
CSSのmarginを0にする事ができるので、めっちゃ便利です！

記述方法も慣れれば超簡単！！

初めに、jqueryが読み込まれていることが前提ですが、

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>[/html]

4個目と４の倍数をmargin-right:10pxを0にするためscriptは、
こんな風に記述すればOKです！

[html]<script type="text/javascript">
$(function(){
$(‘#top_fbox ul li:nth-child(4n)’).each(function(){
$(this).css({margin: ‘0’});
})
});
</script>
[/html]

意味は、これの場合、

[css]#top_fbox ul li[/css]に対して、

nth-child(4n)　は、4の倍数の時に、

$(this).css({margin: ‘0’});　←marginを０にしなさいよっていう意味です！