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

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

demo

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

HTML

<div class="box">
  <p>liが1個の場合はセンタリング</p>
  <ul class="list">
    <li>List</li>
  </ul>
</div>
<div class="box">
  <p>それより多い場合は半端なliは左へ</p>
  <ul class="list">
    <li>List</li>
    <li>List</li>
    <li>List</li>
  </ul>
</div>

js(jQuery)

	//.boxがいくつあるか数える
	var boxLen = $('.box').length;
	//.boxの個数は2個

//forで.boxの個数分回す
//今回は2回回す
	for(i=0;i<boxLen;i++){
		//eq()で.listをフィルタリング
		var listThis = $('.list').eq(i);
		//フィルタリングした.listのli個数を取得する
		var listThisLen = $('.list').eq(i).find('li').length;

		//.listのli個数が1個だった場合text-align:centerに
		//違う場合はtext-align:leftにする
		if(listThisLen ===1){
				listThis.css('textAlign','center');
			}else{
				listThis.css('textAlign','left');
		}
	}

解説

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

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

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

参考サイト

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

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