2018/01/14

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

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

demo

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

HTML

<div class="box">
  <p>liが１個の場合はセンタリング</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の個数は２個

  //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');
    }
  }