CODEWITHSUNDEEP
phpcss
Mu Lem
Mu Lem

Reputation: 71

Count how many times <li> is printed

I need to check how many times li tag is printed

<li>
  <ul class="rd-megamenu-list">
    <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
  </ul>
</li>

If tag is printed 4 times, I need to start a new row. I am printing these values inside a foreach loop to retreive wp menu. I get all correct the only error is that it prints all values in one row by adding menus in columns.

I need to set if row is printed with for values to start new row.

It should look like this

AUDI        BMW        MERCEDES        TOYOTA
HONDA       FERARI     RENAULT         PASSAT
SKODA       FIAT

not like this (EVERYTHING IN ONE ROW)

AUDI        BMW        MERCEDES        TOYOTA HONDA       FERARI     RENAULT   ETC

Complete code

<ul class="rd-navbar-nav">
    <?php
    $count = 0;
    $submenu = false;
    foreach( $menuitems as $item ):
        $link = $item->url;
        $title = $item->title;
        // item does not have a parent so menu_item_parent equals 0 (false)
        if ( !$item->menu_item_parent ):
        // save this id for later comparison with sub-menu items
        $parent_id = $item->ID;
    ?>

    <li>
        <a href="<?php echo $link; ?>" class="title"> <?php echo $title; ?> </a>
        <?php endif; ?>

        <?php if ( $parent_id == $item->menu_item_parent ): ?>

        <?php if ( !$submenu ): $submenu = true; ?>
        <ul class="rd-navbar-megamenu">
        <?php endif; ?>
            <li>
              <ul class="rd-megamenu-list">
                <a href="<?php echo $link; ?>" class="title"><?php echo $item->title; ?></a>
              </ul>
            </li>

           <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
        </ul>
        <?php $submenu = false; endif; ?>

        <?php endif; ?>

        <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
    </li>
    <?php $submenu = false; endif; ?>

    <?php $count++; endforeach; ?>

</ul>

Generated HTML

<ul class="rd-navbar-nav">

    <li>
        <a href="http://localhost:8080/company/" class="title"> Početna </a>
    </li>


    <li>
        <a href="http://localhost:8080/company/o-nama/" class="title"> O nama </a>
     </li>


    <li>
        <a href="http://localhost:8080/company/termoizolacioni-paneli/" class="title"> Termoizolacioni paneli </a>
        <ul class="rd-navbar-megamenu">
            <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/termoizolacioni-paneli/krovni-paneli-2/" class="title">Krovni paneli</a>
                 </ul>
            </li> 
            <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/termoizolacioni-paneli/krovni-paneli/" class="title">Zidni paneli</a>
                </ul>
            </li>
            <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/termoizolacioni-paneli/frigo-paneli/" class="title">Frigo paneli</a>
                </ul>
            </li>
        </ul>
    </li>


    <li>
        <a href="http://localhost:8080/company/ostali-proizvodi/" class="title"> Ostali proizvodi </a>

        <ul class="rd-navbar-megamenu">
            <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Profilisani limovi</a>
                </ul>
            </li>
             <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Vijčana roba</a>
                </ul>
            </li>
             <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Komunalna oprema</a>
                </ul>
            </li>
             <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Profili za suhu gradnju</a>
                </ul>
            </li>
             <li>
                <ul class="rd-megamenu-list">
                    <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Ostali</a>
                </ul>
            </li>
        </ul>   


    </li>

</ul>

Upvotes: 1

Views: 208

Answers (5)

Johannes
Johannes

Reputation: 67758

You can achieve that with CSS, using these two rules (I take it your li elements are inline-blocks):

.rd-megamenu-list li {
  float: left;
}
.rd-megamenu-list li:nth-child(4n+1) {
  clear: left;
}

This will put every 4th li item in a new line.

li {
  display: inline-block;
  padding: 10px;
}

.rd-megamenu-list li {
  float: left;
}

.rd-megamenu-list li:nth-child(4n+1) {
  clear: left;
}
<ul class="rd-megamenu-list">
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
  <li>LISTITEM</li>
</ul>

Here's a similar set of CSS with the genereated HTML you added. I added clear: left; for all first-level li s which I don't know if you want it since that wasn't part of your original question:

ul {
  padding: 0;
  margin-left: 10px;
}

.rd-navbar-megamenu li {
  display: inline-block;
  padding-left: 5px;
  margin: 0;
}

.rd-navbar-megamenu li {
  float: left;
}

.rd-navbar-megamenu li:nth-child(4n+1) {
  clear: left;
}

.rd-navbar-nav>li {
  clear: left;
}
<ul class="rd-navbar-nav">

  <li>
    <a href="http://localhost:8080/company/" class="title"> Početna </a>
  </li>


  <li>
    <a href="http://localhost:8080/company/o-nama/" class="title"> O nama </a>
  </li>


  <li>
    <a href="http://localhost:8080/company/termoizolacioni-paneli/" class="title"> Termoizolacioni paneli </a>
    <ul class="rd-navbar-megamenu">
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/termoizolacioni-paneli/krovni-paneli-2/" class="title">Krovni paneli</a>
        </ul>
      </li>
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/termoizolacioni-paneli/krovni-paneli/" class="title">Zidni paneli</a>
        </ul>
      </li>
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/termoizolacioni-paneli/frigo-paneli/" class="title">Frigo paneli</a>
        </ul>
      </li>
    </ul>
  </li>


  <li>
    <a href="http://localhost:8080/company/ostali-proizvodi/" class="title"> Ostali proizvodi </a>

    <ul class="rd-navbar-megamenu">
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Profilisani limovi</a>
        </ul>
      </li>
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Vijčana roba</a>
        </ul>
      </li>
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Komunalna oprema</a>
        </ul>
      </li>
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Profili za suhu gradnju</a>
        </ul>
      </li>
      <li>
        <ul class="rd-megamenu-list">
          <a href="http://localhost:8080/company/profilisani-limovi/" class="title">Ostali</a>
        </ul>
      </li>
    </ul>


  </li>

</ul>

Upvotes: 1

Spoody
Spoody

Reputation: 2882

As the others said, using CSS is the right way to achieve your goal, but to answer your question here is the PHP code:

<ul>
<?php
// Array of items
$cars = array('AUDI', 'BMW', 'MERCEDES', 'YOTOTA', 'HONDA', 'FERARI', 'RENAULT', 'PASSAT', 'SKODA', 'FIAT');

// Start count at 0
$count = 0;
foreach($cars as $car){
// Add 1 to the count
$count++;
?>
    <li>
        <?=$car?>
    </li>
<?php
    // If this is the fourth element
    if($count === 4){
        // Print a line break
        echo "<br />";
        // And reset the count
        $count = 0;
    }
}
?>
</ul>

This will add a line break after every 4th element.

Upvotes: 0

Andrey Yerokhin
Andrey Yerokhin

Reputation: 273

You can break it to chunks in php:

<?php foreach( $menuitems as $item ):
  if (++$i % 4 == 0) : ?>
     </ul><ul class="rd-navbar-nav">
  <?php endif; ?>

Upvotes: 0

Vladimir
Vladimir

Reputation: 1391

I inserted condition at the end of the loop:

<ul class="rd-navbar-nav">
    <?php
    $count = 0;
    $submenu = false;
    foreach( $menuitems as $item ):
        $link = $item->url;
        $title = $item->title;
        // item does not have a parent so menu_item_parent equals 0 (false)
        if ( !$item->menu_item_parent ):
        // save this id for later comparison with sub-menu items
        $parent_id = $item->ID;
    ?>

    <li>
        <a href="<?php echo $link; ?>" class="title"> <?php echo $title; ?> </a>
        <?php endif; ?>

        <?php if ( $parent_id == $item->menu_item_parent ): ?>

        <?php if ( !$submenu ): $submenu = true; ?>
        <ul class="rd-navbar-megamenu">
        <?php endif; ?>
            <li>
              <ul class="rd-megamenu-list">
                <a href="<?php echo $link; ?>" class="title"><?php echo $item->title; ?></a>
              </ul>
            </li>

           <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
        </ul>
        <?php $submenu = false; endif; ?>

        <?php endif; ?>

        <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
    </li>
    <?php $submenu = false; endif; ?>

    <?php 
$count++; 
if ($count % 4 == 0) {
     echo '<br>';
}
endforeach; 
?>

</ul>

Upvotes: 0

xeo
xeo

Reputation: 832

you can use CSS to do the formatting. this will wrap the items after 4 are displayed. you may need to add text-align and display properties depending on the rest of your CSS>

CSS

.25p { width: 24.99%; }

HTML

<li class='25p'>
  <ul class="rd-megamenu-list">
    <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
  </ul>
</li>

Upvotes: 0

Related Questions