リストの個数が1つの場合のみセンタリングする

あるリストの個数が動的に変化し、その個数が1個のときはセンタリングして、それ以外の時は左寄せにする。
要素をセンタリングしたい時はinline-blockが便利ですけど、下記demoのように横に収まる個数が決まっていて、半端な要素が出た時にセンタリングされてしまいます。
一覧ページやスタッフ紹介など、同じテンプレを使い回す箇所で活躍しそうな感じ。

demo

See the Pen 180113 by nekuta (@nekuta) on CodePen.

HTML

js(jQuery)

解説

更新などで動的に数が変わっていく想定なので、$(‘.box’).lengthで個数の取ってきて、その個数をもとにforを使って回します。demoでは.boxは2個なので2回まわすことになります。

.eq()でフィルタリングする

.eq()は現在マッチしている要素をインデックス番号でフィルタリングしてくれる、とってもいいヤツ。
iを入れることによって、$(‘.list’).eq(0)、$(‘.list’).eq(1)・・・みたいな感じで回してくれます。

参考サイト

.eq() | jQuery 1.9 日本語リファレンス | js STUDIO

  • コーダーのための計算機