baserJSでリスト要素を分割する

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

    Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

    リストをカラム分けしたりしたいとき

    <div class="multi-column">
        <ul>
            <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>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </div>
    
    $('multi-column').bcSplitList(6);
    

    結果

    <div class="multi-column">
        <ul class="-bc-splited-list -bc-splited-list--nth6">
            <li class="-bc-splited-list__item -bc-splited-list__item--nth0">1</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth0">2</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth0">3</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth0">4</li>
        </ul>
            <ul class="-bc-splited-list -bc-splited-list--nth6">
            <li class="-bc-splited-list__item -bc-splited-list__item--nth1">5</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth1">6</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth1">7</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth1">8</li>
        </ul>
            <ul class="-bc-splited-list -bc-splited-list--nth6">
            <li class="-bc-splited-list__item -bc-splited-list__item--nth2">9</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth2">10</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth2">11</li>
        </ul>
            <ul class="-bc-splited-list -bc-splited-list--nth6">
            <li class="-bc-splited-list__item -bc-splited-list__item--nth3">12</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth3">13</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth3">14</li>
        </ul>
            <ul class="-bc-splited-list -bc-splited-list--nth6">
            <li class="-bc-splited-list__item -bc-splited-list__item--nth4">15</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth4">16</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth4">17</li>
        </ul>
            <ul class="-bc-splited-list -bc-splited-list--nth6">
            <li class="-bc-splited-list__item -bc-splited-list__item--nth5">18</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth5">19</li>
            <li class="-bc-splited-list__item -bc-splited-list__item--nth5">20</li>
        </ul>
    </div>
    

    分割方法

    余りを内包して均等に分割します。

    206 で分割した時は [3, 3, 3, 3, 3, 3, 2] (3 余り 2) ではなく [4, 4, 3, 3, 3, 3] と分割されます。

    v0.2.0 では baser.utility.Mathematics.split 関数に計算処理をわける予定です。