how to divide list

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>

how can I auto divide this using jquery

like

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

or could i use php either way is fine

sample code here http://jsfiddle.net/3CRnh/

So you want to make 5 categories per column? You can do that with either a table or floating divs. It is too trivial. — specialscope, Oct 23 '12 at 04:28

score 2 · Answer 1 · answered Oct 23 '12 at 04:41

2

You can automatically divide your list into how many column as you want using 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/

answered Oct 23 '12 at 04:41

Eli

14,779
5
59
77

how can I do that without modifying the html? – Francis Alvin Tan Oct 23 '12 at 04:50
I don't get what you mean? You don't need to modify anything here. – Eli Oct 23 '12 at 04:52

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

please check this demo

you should use .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>");
}

edited May 23 '17 at 10:24

Community

1
1

answered Oct 23 '12 at 04:42

Pragnesh Chauhan

8,363
9
42
53

can this be done automatically, like auto divide it into 2 columns and not manually add numbers to divide the list – Francis Alvin Tan Aug 08 '13 at 07:30
@FrancisAlvinTan, for that you can use jquery plugin https://github.com/weblinc/jquery-columnlist or use css3 `column-count: 2;` check this artical http://alistapart.com/article/css3multicolumn – Pragnesh Chauhan Aug 09 '13 at 07:33

score 0 · Answer 3 · answered Oct 23 '12 at 04:38

You can use divs and CSS for it

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

And the CSS to format it:

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

Just try this demo I have created at http://jsfiddle.net/DehYQ/.

but Im getting the list in a category list widget in wordpress, so i cannot modify the list structure — Francis Alvin Tan, Oct 23 '12 at 04:41

score 0 · Answer 4 · answered Oct 23 '12 at 04:46

Assuming that you only want 5 categories per column and your categories where in an array you could use 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>';?>

score 0 · Answer 5 · answered Oct 23 '12 at 05:13

0

You can visit the link, there is, they give the great example for break the our list in equally parts

Link is here

Click Here

answered Oct 23 '12 at 05:13

Nipun Tyagi

878
9
26

how to divide list

5 Answers5