jQueryを利用してバナー表示に対応

電脳備忘録

2列のバナーを表示するのにリスト表示にしたのですが、間に5pxほど隙間を入れたかったので偶数のliに対してのみクラスが適応になるようにjQueryで対応しました。
忘れないうちに備忘録として残しておこうと思います。

「:nth-child」は、その名の通り「n 番目」の子要素を指定するためのセレクタ(擬似クラス)ですが、それだけではなく、「n 個おき」や、「奇数・偶数」も指定することができます。
そして、この方法であれば 1 から始まる番号を取得するので、ここで期待している結果が得られるということです。

jQuery で奇数番目・偶数番目を指定するときの注意点。

上記のエントリーを参考に書いたjqueryのコードがこれ

//banner
$(document).ready( function () {
$('#banner-list li:nth-child(even)').addClass('banner-list-edge');
});
cssはこんな感じ。
.banner-list-edge {
margin-left: 5px;
}

言葉だけではアレなのでとりあえずサンプルとして起こしておこうと思います。

  • odd...奇数
  • even...偶数

広告

ブログの維持費に充てるでございます・・・。