Question

我有一个<ul>动态生成，其中任意位置在8到25 <li＆gt;之间。

示例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

这是我的尝试

Live Demo

$(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

修改了发布的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);
  }
});

Answer 4

如果这是你想要的，你也可以将它变为递归：

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 5

您可以通过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;
}

<强> Working Demo

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

5 个答案: