2列のバナーを表示するのにリスト表示にしたのですが、間に5pxほど隙間を入れたかったので偶数のliに対してのみクラスが適応になるようにjQueryで対応しました。
忘れないうちに備忘録として残しておこうと思います。
「:nth-child」は、その名の通り「n 番目」の子要素を指定するためのセレクタ(擬似クラス)ですが、それだけではなく、「n 個おき」や、「奇数・偶数」も指定することができます。
jQuery で奇数番目・偶数番目を指定するときの注意点。
そして、この方法であれば 1 から始まる番号を取得するので、ここで期待している結果が得られるということです。
上記のエントリーを参考に書いたjqueryのコードがこれ
//banner
$(document).ready( function () {
$('#banner-list li:nth-child(even)').addClass('banner-list-edge');
});
cssはこんな感じ。
.banner-list-edge {
margin-left: 5px;
}
言葉だけではアレなのでとりあえずサンプルとして起こしておこうと思います。
- odd...奇数
- even...偶数