سؤال

I have an HTML list like this:

<ul>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
    <li>lorem lipsum..</li>
</ul>

I want to split list into groups of 4 items:

<ul>
    <li class="group1">
        <ul>
            <li>lorem lipsum..</li>
            <li>lorem lipsum..</li>
            <li>lorem lipsum..</li>
            <li>lorem lipsum..</li>
        </ul>   
    </li>
    <li class="group2">
        <ul>
            <li>lorem lipsum..</li>
            <li>lorem lipsum..</li>
            <li>lorem lipsum..</li>
            <li>lorem lipsum..</li>
        </ul>   
    </li>
</ul>

I tried with chunk:

<ul>
    <#assign seq = nav.getChildren()>
    <#list seq?chunk(4) as row>
        <#list row as nav_child>
            <li class="${nav_class}">
                <ul>
                    <li>${nav_child.getName()}</li>
                </ul>   
            </li>
        </#list>
    </#list>
</ul>

It works for each li and not for a group of 4 li. So each li is wrapper inside li > ul. How can I wrap 4 li inside li > ul?

Any help is appreciated! Thank you!

هل كانت مفيدة؟

المحلول

Like this (the point is the placement of #list-s, but I have made some other changes too for better readability):

<ul>
    <#list nav.children?chunk(4) as navChildGroup>
        <li class="${nav_class}">
            <ul>
                <#list navChildGroup as navChild>
                    <li>${navChild.name}</li>
                </#list>
            </ul>   
        </li>
    </#list>
</ul>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top