REDLINE MAGAZINE | jQueryでnの倍数だけに何か処理する（追記有）

jQueryでnの倍数だけに何か処理する（追記有）

>>081007：追記1　:nth-child について追記しました。
>>081007：追記2　:lt について追記しました。

今までのバックナンバーリストを一覧でダダダーと並べてるページがあって、（このサイトで言うと全エントリのアーカイブページみたいなページ）リストの件数が少なかった時は特に何も感じなかったんだけど、サイト公開から時間が経って「数が増えてなんか見難くない？」みたいな話になった。

で、5件分ごとに区切り線入れたいっていう提案をされて了解したけど、なんかどんな方法が効率いいんか迷った。手作業で5件目ごとにclass振っていく様な手数増える方法でもいいんだけど、今新しいのが上、古いのが下ってなってる状態で上から順番に5件目毎にclass付けした所で更新の度に1つずつズラしていくの？手数増えるにも程があるｗｗｗみたいな発想になって、やっぱりJSに頼るしかねーな、と。

jQueryの:nth-child()使います

JSが分からない私みたいなへっぽこwebデザイナの味方、jQuery。今回は5件毎に何か処理するって話なので、:nth-child()を使いました。サンプルこんな感じ。

>>何もしてない状態の元ページサンプル

>>5件目毎に区切り線入れたページサンプル

<script type="text/javascript">
<!--
$(document).ready(function() {
	$("li:nth-child(5n)").css({"border-bottom":"1px solid #ccc","padding":"0 0 6px 19px","margin":"0 0 6px"});
}); 
-->
</script>
<ul>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
以下liタグ省略
</ul>

「:nth-child(5n)」の部分で5の倍数を指定して、liタグの5件目ごとに何かするっていう処理をしてます。ここではcssでborder-bottom,padding,marginを指定。JS無効の場合は当然区切り線は表示されないけど、別に線がなくても最強にわけわからん状態になるわけでもないのでいいかな、と。こんなに簡単に倍数を取得できるなら3の倍数の時アホ発言、8の倍数の時青春しちゃうのも楽ですね！
>>勢いで試してみた。

:eq()と:nth-child()の違い

n番目の○○を抽出するのに「:eq()」というのもある。「:nth-child()」との違いは、:eq()がゼロから始まるインデックス番号を取るのに対し、:nth-childでは1から始まる番号になるとのこと。また:eq()が要素をひとつだけ返すのに対して、:nth-childは親要素毎の抽出を行うので結果として複数の要素を取ることができます、という違いがあるらしい。

>>:nth-child(index/even/odd/equation) - jQuery 1.2.6 日本語リファレンス

最新から3つ目までだけに「NEW」とかつける

何かもっとこの:nth-child使えないかなーということで、まず浮かんだのが更新情報等のリストで最新から3つ目までだけに「NEW」とかつけるパターン。

普段は直接htmlソースにclassを振って内容右にアイコンを表示させるとか、直接内容の中に文字列やnewマークアイコンを入れる、あるいはJSを使って一定期間の間だけnewマークをおいてみたりとかしてます。上の:nth-childを使って上から3つだけ内容右に「NEW」って表示させたい場合はこんな感じで使えるかなぁ。

>>:nth-childで上から3つ目までにNEW入れたサンプル

<script type="text/javascript">
<!--
$(document).ready(function() {
	$("li:nth-child(1),li:nth-child(2),li:nth-child(3)").append("<span class='sample'>【NEW】</span>");
}); 
-->
</script>

:nth-childで指定するインデックス番号を一気に複数指定する方法がわからんかったので、なんかとりあえず並べてみた。,区切りだとうまくいかなかったんだけど何か一気に複数指定する方法分かる人がいたらどこかで教えてください＞＜

とりあえずそれらで取得した要素に.appendで<span class='sample'>【NEW】</span>を挿入。classのsampleはCSSで適当に赤字ボールドにしてるだけ。

:nth-childで指定するインデックス番号を複数指定
(追記:081007)

上記「:nth-childで指定するインデックス番号を一気に複数指定する方法がわからん」と書いた件に関して、コメント欄にてお教え頂きました。

最初の3つが指定したかったら『:nth-child(-n+3)』という形で指定すればＯＫとのこと。但し、jQuery1.2.6では大丈夫だけど、1.1.4の方では使えないという注意点も。nanto_viさん、お教え頂きありがとうございました！

ちなみに、このサイトに置いてるjQueryは1.1.4なので、その書き方をすると3つ目だけが反応するという結果になってました。バージョンによって使える書き方、使えない書き方もチェックしておいた方がいいってことですね。

でも、それなら:lt()の方がいいのかも

もっとスッキリさせる方法ないんかなと思ったら「:lt()」っていうのがあった。「:lt()」っていうのは指定したインデックス番号よりも小さい番号を持つ全ての要素を取得するやつ。こっちで3番目よりも小さい番号のやつに「NEW」をつける処理しますよーってしてあげた方がいい気がした。ソースのスッキリ度が。

(追記:081007)すいません。これまたコメント欄でご指摘頂いたんですが、ここに置いてた:ltを使ったサンプルのソースに上で使ったサンプルの残骸部分が残ってました。元々のソースは『li:nth-child:lt(3)』となってたんですが、正しくは『li:lt(3)』です。（サンプルページや下記ソース部分は修正しました）恥ずかしい～＞＜

>>:ltで上から3つ目までにNEW入れたサンプル

<script type="text/javascript">
<!--
$(document).ready(function() {
	$("li:lt(3)").append("<span class='sample'>【NEW】</span>");
}); 
-->
</script>

ちなみに、上でチラっと書いた一定時間で消えるNEWマークをjQueryでやる方法はこちらのページみたいにすればいいみたい。

>>一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版 - かたつむりくんのWWW

後からデザインを変更したり、追加したりってのは、CSSを書き換えるだけでできる事もたくさんあるけど、やっぱこういう何番目の～とかこういうケースだけ～っていう特殊なことをサクサクっとできるjavascriptに感動。

2008年10月07日 11:44 | Red | パーマリンク