javascript - 使用 jQuery/JS 将单个 <ul> 拆分为四个单独的 <ul>

Question

我有一个<ul>动态生成 8 到 25 之间的任意值 <li > 的。

示例 HTML:

<ul id="genList">
 <li>one</li>
 <li>two</li>
 <li>three</li>
 <li>four</li>
 <li>five</li>
 <li>six</li>
 <li>seven</li>
 <li>eight</li>
</ul>

有没有办法分割这个单曲<ul>分成四列？

到目前为止我已经得到了这个:

jQuery(function ($) {
  var size = 4,
      $ul  = $("ul"),
      $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
      loop = Math.ceil($lis.length / size),
      i    = 0;

  $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

  for (; i < loop; i = i + 1) {
    $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + 4)).insertAfter($ul);
  }
});

这只是将其包装成 4 列深。我需要划分 <ul>首先变成 4 并将四舍五入的值传递给 var size .

编辑:需要支持 IE8 及更高版本并保持列表的垂直完整性(第一列:1、2 等)。

Answer 1

仅使用 CSS 的四列将是这样的

#genList li{
      width:22%;
      float:left;
      padding:0;
      margin:0;
    }

您也可以使用固定宽度..