javascript - 使用 jQuery/JS 拆分单个分成四个独立的的

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;
    }

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

Answer 2

这是我的尝试

现场演示

$(function() {
    $("#genList li").replaceWith(function() {
          return $("<p/>").append($(this).html());
    });
    $("#genList").replaceWith($("<div/>",{"class":"cols", "id":"genlist"}).html($("#genList").html()));
});

使用这个 CSS

.cols { column-count:4;
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
}
.cols p { margin-top:0}

Answer 3

如果这是您想要的，您也可以将其转换为递归：

separate($('#genList'), 4);

function separate($ul, size) {

    var $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
        loop = Math.ceil($lis.length / size);            
    $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

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

jsFiddle

Answer 4

您可以通过 CSS 执行此操作，但您必须为 li 元素设置宽度或边距：

#genList li {
    float: left;
    width: 100px;
}

#genList li:nth-of-type(5),
#genList li:nth-of-type(9),
#genList li:nth-of-type(13),
#genList li:nth-of-type(17),
#genList li:nth-of-type(21),
#genList li:nth-of-type(25) {
    clear:both;
}

工作演示

Answer 5

修改了发布的Javascript：

jQuery(function ($) {
  var rows = 4,
      $ul  = $("ul"),
      $lis = $ul.children(),
      size = Math.ceil($lis.length / rows), 
      $lis = $lis.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) + size)).insertAfter($ul);
  }
});