0

I have a array like ('mary', 'johnny', 'butch', 'pony', 'katy', 'chuck', 'norris') The number of elements can vary...

How can I build a nice list from all these elements, like this:

<ul>
  <li>
    Mary
    Johnny
    Butch
  </li>

  <li>
    Pony
    Katy
  </li>

  <li>
    Chuck
    Norris
  </li>

?

Basically build the list like a spiral:

> -------------
               |
<--------------
|
>--------------
               |
<--------------

The number of list items is fixed, for eg. 3 in the example above

Improve this question
6
  • 5
    What rules are being followed here? How will the script know when to use three, and when to use two elements? Commented Oct 5, 2010 at 22:00
  • 1
    array_chunk would give you 3-3-1 instead of 3-2-2, is that acceptable? Commented Oct 5, 2010 at 22:04
  • pekka I forgot to mention that there are 3 list items. I want to distribute the array elements evenly to these 3 <li>'s Commented Oct 5, 2010 at 22:06
  • But what if there are more than 9 elements in the array? Commented Oct 5, 2010 at 22:09
  • oops, my mistake max 3 items per list is wrong - I meant max 3 list items :) Commented Oct 5, 2010 at 22:10

4 Answers 4

Reset to default
3

Yet Another Path, Because There Was Not Weird Enough Code Posted.

//set the amount of items
$li_items = 3;//can be anything, really

echo '<ul>';
//loop
for(;$li_items > 0;$li_items--){
   echo "\n\t<li>\n\t".implode("\n\t",
       array_splice($array,0,ceil(count($array)/$li_items))
      )."\n\t<li>";
}
echo '</ul>';
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

lol, thanks. but I'll go with the partition() function I found :)
That function does have the advantage of being legible indeed ;)
2

You want to group them in 3's? Something like:

<?php
$list = ('mary', 'johnny', 'butch', 'pony', 'katy', 'chuck', 'norris');
$c = 0;
$LIMIT = 3;
echo "<ul>";
foreach($list as $current) {
    echo "<li>$current</li>";
    $c += 1;
    if($c == $LIMIT) { echo "</ul><ul>"; }
}
echo "</ul>";

Very ugly, but gets the job done

Improve this answer

3 Comments

I think Alex is looking for a script that will shift as more are added. So if there's 12, he wants groups of 4, 9 would be groups of three, etc. The hitch comes when you have non-divisible numbers, which would probably require everybody's favorite, the ceil command
exactly :) the example above shows one group of 3 and two groups of 2.
This is not an advisable snippet because: 1. It introduces a temporary variable that could have been incremented by the foreach 2. $c === 3 only occurs once, but needs to occur over and over (every three iterations).
1

What you should do is separate presentation from logic. Instead of figuring out how many items should go in each element, put each item in it's own element. Each one is a line-item after all.

<ul class="the_list">
    <li>Mary</li>
    <li>Johnny</li>
    <li>Butch</li>
    <li>Pony</li>
    <li>Katy</li>
    <li>Chuck</li>
    <li>Norris</li>
</ul>

Then use CSS to display the list however you want. For example, you could do something like this:

.the_list    { width:300px;}
.the_list li { display:block;float:left;width:100px;}

You'll need some additional rules like a reset stylesheet first, but that's the gist of it.

Improve this answer

3 Comments

thanks, but in my case it's not possible because I'm applying this to a graphic slider. Number of list items are fixed, and only 3 items are displayed at a time. the rest will slide...
What is this graphic slider you mention? Can it not be edited?
actually there are 3 such sliders applied to each of the 3 <li>'s. This is why I need them separated. the slider is the "cycle" jquery plugin
1

You could loop through the array and use modulus

for ($i = 0; $i < count($array); $i++)
{
    if ($i % 3 == 0)
    {
        //append to first li
    }
    else if ($i % 3 == 1)
    {
        //append to second li
    }
    else
    {
        //append to third li
    }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.