リストを任意のカラム数に分ける

Ads

Result


普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。
var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。

マークアップには変更を加えず処理出来るので覚えておけば何かと重宝すると思います。

jQuery

$(function($) {
    var num_cols = 3,
//対象のリスト
    container = $('.split-list'),
    listItem = 'li',
    listClass = 'sub-list';
    container.each(function() {
        var items_per_col = new Array(),
//リストのチェックと分割
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
//分割したリストをsub-listの名のclassのul要素で包括
            $(this).append($('<ul ></ul>').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find('.' + listClass).last().append(items[j + pointer]);
            }
        }
    });
});

html

<ul class="split-list">
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
  <li>リスト 4</li>
  <li>リスト 5</li>
  <li>リスト 6</li>
  <li>リスト 7</li>
  <li>リスト 8</li>
  <li>リスト 9</li>
  <li>リスト 10</li>
  <li>リスト 11</li>
  <li>リスト 12</li>
</ul>

via

Split Lists Items into Columns with jQuery

タイトルとURLをコピーしました