MonteCristo
MonteCristo

Reputation: 1550

Combine 2 php while loops and add a parent div at nth iteration

I have 2 while loops and I need to wrap them both when with a parent div at nth iteration so output neec somthing like below

<!-- 1-4 items -->
<div class"parent">
<nav>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
<nav>
<section>
   <li>content 1</li>
   <li>content 2</li>
   <li>content 3</li>
   <li>content 4</li>
</section>
</div>

<!-- 5-8 items -->
<div class"parent">
<nav>
   <li>item 5</li>
   <li>item 6</li>
   <li>item 7</li>
   <li>item 8</li>
<nav>
<section>
   <li>content 5</li>
   <li>content 6</li>
   <li>content 7</li>
   <li>content 8</li>
</section>
</div>

I know how I can iterate nav (and section) seperately and wrap them in a div at each iteration... but I need to combine these 2 seperate while loops and iterates over them all together

 <?php $items = 0;  while ($sub_sections_mb->have_fields('sub-sections')) : ?>
    <?php if ($items % 4 == 0) : ?>

    <nav role="menu">
        <ul>
    <?php endif ; ?>      

               <li class="item col2 col <?php if ($items == 1){echo 'current';} ?>" role="menuitem"> <?php echo $i; $sub_sections_mb->the_value('title'); ?>

                </li>

    <?php   $items++;
            if ($items % 4 == 0) : ?>

        </ul>
    </nav>
    <?php   endif;
            endwhile; // End printing heading ?>

    <?php if ($items % 4 != 0) : ?>

      </ul>
    </nav>
    <?php endif ; ?> 

With my current code output looks something like this

<div>
<nav>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
<nav>
<nav>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
<nav>
</div>


<div>
<section>
   <li>content 5</li>
   <li>content 6</li>
   <li>content 7</li>
   <li>content 8</li>
</section>
<section>
   <li>content 5</li>
   <li>content 6</li>
   <li>content 7</li>
   <li>content 8</li>
</section>
</div>

I am using WP Alchemy metabox if it any help

Upvotes: 0

Views: 292

Answers (1)

Here's just an example that could get you started. You'll probably want to change it up to match what you need. I couldn't use your $sub_sections information so I just used a for() loop that goes over the info twice.

EDIT: Updated the code to the following:

$total = 7; // The total number of items.
$every = 4; // How many items go into each nav/section.

$output = '';

for($i = 0; $i < round($total / $every); $i++)
{
    $min = $i * $every;
    $max = $min + $every > $total ? $total : $min + $every;

    $output .= '<div class="parent">';

    /* Navigation */
    $output .= '<nav role="menu"><ul>';

    for($j = $min; $j < $max; $j++)
        $output .= '<li>Item ' . ($j + 1) . '</li>';

    $output .= '</ul></nav>';

    /* Section */
    $output .= '<section>';

    for($j = $min; $j < $max; $j++)
        $output .= '<div>Content ' . ($j + 1) . '</div>';

    $output .= '</section>';

    $output .= '</div>';
}

echo $output;

Hope that can get you going in the right direction.

Upvotes: 1

Related Questions