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から、を使用する必要があります

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

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 に答える
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 に答える