简体   繁体   中英

How to put dynamically-generated n-amount of <div>s in <li>

Hello :) I realy need your help here. I dynamically generate list of items but instead of putting each item in separate <li> I want to get something like this:

<ul>
   <li>
      <div>$pt</div>
      <div>$pt</div>
      <div>$pt</div>
   </li>
   <li>
      <div>$pt</div>
      <div>$pt</div>
      <div>$pt</div>
   </li>
</ul>

Here is code I have:

<ul class="some-ul-class">
    <?php $itemCount = 3; ?>
       <?php $i=0; foreach ($p->getItems() as $pt): ?>
           <?php if ($i++%$itemCount==0): ?>
              <li class="item">
           <?php endif; ?>
                 <div>$pt</div>
              </li>
       <?php endforeach; ?>
</ul>

But as the result I get structure like this:

<ul>
   <li>
      <div>$pt</div>
   </li>
   <div>$pt</div>
   <div>$pt</div>

   <li>
      <div>$pt</div>
   </li>
   <div>$pt</div>
   <div>$pt</div>
</ul>

Thank you for help

<ul class="some-ul-class">
<?php $itemCount = 3; ?>
   <?php $i=0; foreach ($p->getItems() as $pt): ?>
       <?php if ($i%$itemCount==0): ?>
          <li class="item">
       <?php endif; ?>
             <div>$pt</div>
       <?php if ($i%$itemCount==2): ?>
          </li>
       <?php endif; $i++; ?>
   <?php endforeach; ?>
</ul>

You can try this.

<ul class="some-ul-class">
  <?php $itemCount = 3;
    $i=0;
    foreach ($p->getItems() as $pt):
      if ($i%$itemCount==0):
        echo '<li class="item">';
      endif;
        echo "<div>$pt</div>";
      if ($i%$itemCount==2):
        echo '</li>';
      endif; $i++;
    endforeach; ?>
</ul>

Try something like this:

<ul class="some-ul-class">
    <?php $itemCount = 4; ?>
    <li>
    <?php $i = 1; foreach ($p->getItems() as $pt): ?>
        <?php if ( $i % $itemCount == 0): ?>
            </li><li>
        <?php endif; ?>
        <?php $i++; ?>
        <div><?php echo $pt; ?></div>
    <?php endforeach; ?>
     </li>
</ul>

This generates:

<ul class="some-ul-class">
    <li>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </li><li>
            <div>4</div>
            <div>5</div>
            <div>6</div>
    </li>
</ul>

Demo

Your code will not achieve nested DIVS in LI because you need a multidimensional array to nest the items within the container. The solution is to break the initial DB result set in to chunks with array chunk.

This just splits your array (1,2,3,4,5,6) to ([0] => array(1,2,3), [2] => array(4,5,6)

Run through the loop below you will get two LI with 3 nested DIV. The code is not tested but should be something like operational.

<?php 

$items = array(1,2,3,4,5,6,8,9,10,11,12,13,14,15);         
// Your initial item array

$rows = 3;                           
// Number of rows in each li 

$items = array_chunk($items, $rows); 
// Final nested array in blocks of 3

if ($items) {       
    echo "<ul class='some-ul-class'>\n";        
    foreach ( $items as $item ) {           
        echo "<li class='items'>\n";            
        foreach ($item as $divs) {
            echo "<div>{$divs}</div>\n";
        }           
        echo "</li>\n";             
    }       
    echo "</ul>\n";
}

?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM