Displaying four li's per ul's not returning result as required

Question

I want to display <ul> and <li> dynamically like

<ul>
  <li></li>
  </li></li>
  <li></li>
  <li></li>
</ul>

<ul>
  <li></li>
  </li></li>
  <li></li>
  <li></li>
</ul>

ie, each <ul> with 4 <li> s.

I want to display these dynamically. I tried with the following code:

$i=0;
foreach($query->result() as $inboxresult)
{
        if($inboxquery->num_rows()>0)
        {
            if($i%4==0)
            {
                echo '<ul class="msgdisplayul item">';
            }
            $parentid=$inboxresult->id;
            echo '<li class="msgdisplayli">
             <div class="msgfullarea">
               <div class="displyusrimge">
                   <input type="hidden" id="status'.$inboxresult->id.'">
                   <a href="">';
                    echo '<img src="'.base_url().'images/friend_avatar_default.jpg" alt="Default User Avatar" />';
                    echo '</a>
                </div> 
             </div>
             <div class="clear"></div>
             </li>'; 
             if($i%4==0 && $i!=0)
             {
                echo '</ul>';
             }          
        }
        $i++;
}

This is returning result as shown below:

<ul class="msgdisplayul item">
  <li class="msgdisplayli">
    <div class="msgfullarea">
        <div class="displyusrimge">
            <input type="hidden" id="status10">
            <a href=""><img src="http://localhost:8080/workspace/project/images/friend_avatar_default.jpg" alt=" Default User Avatar"></a>
        </div>
    </div>
    <div class="clear"></div>
   </li>
   <li class="msgdisplayli">
     <div class="msgfullarea">
         <div class="displyusrimge">
             <input type="hidden" id="status7">
              <a href=""><img src="http://localhost:8080/workspace/project/images/friend_avatar_default.jpg" alt=" Default User Avatar"></a>
          </div>
    </div>
    <div class="clear"></div>
  </li>
  <ul class="msgdisplayul item"><li class="msgdisplayli">
    <div class="msgfullarea">
        <div class="displyusrimge">
            <input type="hidden" id="status1">
            <a href=""><img src="http://localhost:8080/workspace/project/images/friend_avatar_default.jpg" alt="Default User Avatar"></a>
         </div>
    </div>
    <div class="clear"></div>
   </li>
   </ul>
</ul>

Can anybody help me to solve this? Thanks in advance.

Answer 1

You're incrementing $i when you shouldn't... When you don't print li elements, you should not increment $i:

$i = 0;
foreach ($query->result() as $inboxresult)
{
        if ($inboxquery->num_rows()>0)
        {
            if ($i % 4 == 0)
            {
                echo '<ul class="msgdisplayul item">';
            }
            $parentid = $inboxresult->id;
            echo '<li class="msgdisplayli">
             <div class="msgfullarea">
               <div class="displyusrimge">
                   <input type="hidden" id="status'.$inboxresult->id.'">
                   <a href="">';
                    echo '<img src="'.base_url().'images/friend_avatar_default.jpg" alt="Default User Avatar" />';
                    echo '</a>
                </div> 
             </div>
             <div class="clear"></div>
             </li>'; 
             // if you increment $i here, you don't need to worry if $i = 0 to close the ul
             $i++;
             if ($i % 4 == 0)
             {
                echo '</ul>';
             }          
        }
}

Oh, and mixing logic with HTML output, very bad idea ;-)