jQueryを使用してHTML ul> liを3列に変換する

Question

私がしようとしていることは、リストを3つの列に分割することです。私はcss3がこれを行うオプションを持っていることを知っていますが、私はそれをjQueryでやりたいと思っています。アプリケーションはIE 8以上で動作する必要があるためです。

私は親切にここに私のコード

<ul class="split-list"> 
    <li>list Item 1</li> 
    <li>list Item 2</li> 
    <li>list Item 3</li> 
    <li>list Item 4</li> 
    <li>list Item 5</li> 
    <li>list Item 6</li> 
    <li>list Item 7</li> 
    <li>list Item 8</li> 
    <li>list Item 9</li> 
    <li>list Item 10</li> 
    <li>list Item 11</li> 
    <li>list Item 12</li> 
    <li>list Item 13</li> 
    <li>list Item 14</li> 
    <li>list Item 15</li> 
    <li>list Item 16</li> 
</ul> 

をチェックしようとしたかを説明します私の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++) { 
      $(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]); 
      } 
     } 
    }); 
}); 

最後に私の小さなCSS

.split-list ul{ 
    float: left; 
    margin-left: 1em; 
} 
.split-list li{ 
    padding-right: 2em; 
    line-height: 1.5em; 
    font-size:12px; 
} 

は私の結果を参照してくださいです：
を

これは3列に分かれていますが、問題は通常の標準であるためリスト項目12を2番目の列に引っ張りたいという問題です。常に左のものを入力し、動的でなければなりません。

誰かが私を助けることができますか？

あなたが <li>要素は、単にこのようなCSSを使用するための3つの列を達成することができます

Answer 1

チェックこれこれは、しかし、ではないかもしれません

$(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), 
 
     max_items_per_col = Math.ceil(items.length/num_cols), 
 
     difference = (max_items_per_col * num_cols)- items.length; 
 
     for (var i = 0; i < num_cols; i++) { 
 
      if (i == num_cols-1) { 
 
       items_per_col[i] = max_items_per_col - difference; 
 
      } else { 
 
       items_per_col[i] = max_items_per_col; 
 
      } 
 
     } 
 
     for (var i = 0; i < num_cols; i++) { 
 
      $(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]); 
 
      } 
 
     } 
 
    }); 
 
});

.split-list ul{ 
 
    float: left; 
 
    margin-left: 1em; 
 
} 
 
.split-list li{ 
 
    padding-right: 2em; 
 
    line-height: 1.5em; 
 
    font-size:12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="split-list"> 
 
    <li>list Item 1</li> 
 
    <li>list Item 2</li> 
 
    <li>list Item 3</li> 
 
    <li>list Item 4</li> 
 
    <li>list Item 5</li> 
 
    <li>list Item 6</li> 
 
    <li>list Item 7</li> 
 
    <li>list Item 8</li> 
 
    <li>list Item 9</li> 
 
    <li>list Item 10</li> 
 
    <li>list Item 11</li> 
 
    <li>list Item 12</li> 
 
    <li>list Item 13</li> 
 
    <li>list Item 14</li> 
 
    <li>list Item 15</li> 
 
    <li>list Item 16</li> 
 
</ul>

Answer 2

、

.small-width{ 
 
    display:inline-block; 
 
    width:30%; 
 
}

<ul class="split-list"> 
 
    <li class='small-width'>list Item 1</li> 
 
    <li class='small-width'>list Item 2</li> 
 
    <li class='small-width'>list Item 3</li> 
 
    <li class='small-width'>list Item 4</li> 
 
    <li class='small-width'>list Item 5</li> 
 
    <li class='small-width'>list Item 6</li> 
 
    <li class='small-width'>list Item 7</li> 
 
    <li class='small-width'>list Item 8</li> 
 
    <li class='small-width'>list Item 9</li> 
 
    <li class='small-width'>list Item 10</li> 
 
    <li class='small-width'>list Item 11</li> 
 
    <li class='small-width'>list Item 12</li> 
 
    <li class='small-width'>list Item 13</li> 
 
    <li class='small-width'>list Item 14</li> 
 
    <li class='small-width'>list Item 15</li> 
 
    <li class='small-width'>list Item 16</li> 
 
</ul>

Answer 3

非常にセマンティック

function colonize(parentId, colNo) { 
 
    var $ul = $(parentId), 
 
    $lis = $('li', $ul), 
 
    n = $lis.length, 
 
    i, x, k = 0; 
 

 
    for (i = 0; i < colNo; i++) { 
 
    $col = $('<div>'); 
 
    $col.width(100/colNo+'%'); 
 
    $col.appendTo($ul); 
 
    debugger; 
 
    if (i == colNo - 1) { 
 
     x = n - k; 
 
    } else { 
 
     x = Math.floor(n/colNo) == n/colNo ? n/colNo : Math.floor(n/colNo) + 1; 
 
    } 
 
    k += x; 
 
    if (x) { 
 
     Array.prototype.slice.apply($lis, [k - x, k]).forEach((li) => { 
 
     $(li).appendTo($col); 
 
     }); 
 
    } 
 
    } 
 

 
}; 
 

 

 
$(document).ready(function() { 
 
    colonize('ul.split-list', 3); 
 
});

ul { 
 
    vertical-align: top; 
 
} 
 

 
ul>div { 
 
    float: left; 
 
    margin:0; 
 
    padding:0; 
 
    border:0; 
 
} 
 

 
ul div li { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <ul class="split-list"> 
 
    <li>list Item 1</li> 
 
    <li>list Item 2</li> 
 
    <li>list Item 3</li> 
 
    <li>list Item 4</li> 
 
    <li>list Item 5</li> 
 
    <li>list Item 6</li> 
 
    <li>list Item 7</li> 
 
    <li>list Item 8</li> 
 
    <li>list Item 9</li> 
 
    <li>list Item 10</li> 
 
    <li>list Item 11</li> 
 
    <li>list Item 12</li> 
 
    <li>list Item 13</li> 
 
    <li>list Item 14</li> 
 
    <li>list Item 15</li> 
 
    <li>list Item 16</li> 
 
    </ul> 
 
</body>