Question

<ul><h2>More useful stuff... </h2>
<li><a href="#">category 1</a></li>
<li><a href="#">category 2</a></li>
<li><a href="#">category 3</a></li>
<li><a href="#">category 4</a></li>
<li><a href="#">category 5</a></li>
<li><a href="#">category 6</a></li>
<li><a href="#">category 7</a></li>
<li><a href="#">category 8</a></li>
<li><a href="#">category 9</a></li>
<li><a href="#">category 10</a></li>
<li><a href="#">category 11</a></li>
<li><a href="#">category 12</a></li>
</ul>

如何使用jquery

自动划分它

喜欢

category 1     category 6      category 11
category 2     category 7      category 12
category 3     category 8
category 4     category 9
category 5     category 10

或者我可以用php的方式很好

示例代码http://jsfiddle.net/3CRnh/

Answer 1

您可以使用CSS自动将列表划分为多少列：

ul {
    column-count:3; -moz-column-count:3; -webkit-column-count:3; 
    column-gap:2em; -moz-column-gap:2em; -webkit-column-gap:2em;
}

DEMO： http://jsfiddle.net/3CRnh/2/

Answer 2

请查看 demo

您应该使用question

中的.slice

var li = $("ul > li");
$('li').unwrap();
for(var i = 0; i < li.length; i+=5) {
 li.slice(i, i+5).wrapAll("<ul class='left'></ul>");
}

Answer 3

您可以使用div和CSS

<ul><h2>More useful stuff... </h2>
    <div class="a">
          <li><a href="#">category 1</a></li>
          <li><a href="#">category 2</a></li>
          <li><a href="#">category 3</a></li>
          <li><a href="#">category 4</a></li>
          <li><a href="#" >category 5</a></li>
    </div>
    <div class="b">
          <li><a href="#">category 6</a></li>
          <li><a href="#">category 7</a></li>
          <li><a href="#">category 8</a></li>
          <li><a href="#">category 9</a></li>
          <li><a href="#">category 10</a></li>
    </div>
    <div class="c">
          <li><a href="#">category 11</a></li>
          <li><a href="#">category 12</a></li>
    </div>
</ul>

用CSS格式化它：

.a,.b,.c{
    float:left;
    padding-right:50px;
}

试试我在http://jsfiddle.net/DehYQ/创建的演示。

Answer 4

假设您只需要每列5个类别，而您的类别在数组中可以使用php：

<?php
$categories = array(1,2,3,4,5,6,7,8,9,10,11,12); // my made up category array
echo '<div style="float:left">';
foreach($categories as $k=>$category){
    if($k%5==0 && $k!=0){
        echo '</div><div style="float:left">';
    }
    echo '<li><a href="#">category '.$category.'</a></li>';
}
echo '</div>';?>

Answer 5

你可以访问这个链接，它们提供了一个很好的例子，可以在同等部分打破我们的列表

链接在这里

点击这里

如何划分清单

5 个答案: