Loop exists / if empty

  • studioavanti

    (@studioavanti)


    4 years, 11 months ago

    Hi,

    I’m looping though hierarchical pages to build a menu and need to distinguish pages with sub pages from the ones that don’t have sub pages.

    The final output should look like that: 

    PAGE 1 (has sub pages)
- SUB PAGE
PAGE 2
PAGE 3 (has sub pages)
- SUB PAGE

    Here’s my code: 

        <ul>
    [loop type=page parent=top-parent-page orderby=menu]
        [-loop exists parent=this orderby=menu]
        <li class="has-submenu">[field title-link]
            <ul class="submenu">
                [the-loop]
                <li>[field title-link]</li>
                [/the-loop]
            </ul>
        </li>
        [if empty]<li>[field title-link]</li>[/if]        
        [/-loop]
    [/loop]
    </ul>

    The nested loop fetches sub pages if the loop’s not empty, and i use [if empty] for the pages without children.

    The problem is [if empty] doesn’t output anything and i get this result: 

    PAGE 1
- SUB PAGE
PAGE 3
- SUB PAGE

    Page 2 (no children) is removed.

    [Update] Actually i realize [the-loop] doesn’t output anything here either.

    Any idea please?
    Thanks for your help. 😉

    • This topic was modified 4 years, 11 months ago by studioavanti.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter studioavanti

    (@studioavanti)

    4 years, 11 months ago

    Short version: how to add a specific has-submenu class to <li> with nested <ul> only (sub pages)?

    Maybe i better use JS afterward?

    • This reply was modified 4 years, 11 months ago by studioavanti.
    Thread Starter studioavanti

    (@studioavanti)

    4 years, 11 months ago

    After all, it’s much simpler with jQuery:

    $('.my-menu > ul > li > ul').parent().addClass('has-submenu');

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Loop exists / if empty’ is closed to new replies.