2 
<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/

4

5 回答 5

2

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

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

演示：http: //jsfiddle.net/3CRnh/2/

于 2012-10-23T04:41:39.587 回答
2

请检查这个演示

你应该使用.slice, from question

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>");
}
于 2012-10-23T04:42:39.327 回答
0

假设您只需要每列 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>';?>
于 2012-10-23T04:46:44.650 回答
0

你可以访问链接，那里有，他们给出了一个很好的例子，可以将我们的列表分成几部分

链接在这里

点击这里

于 2012-10-23T05:13:03.593 回答
0

您可以为此使用 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/创建的这个演示。

​</p>

于 2012-10-23T04:38:18.887 回答