如果超过6个子元素，则将列表拆分为2列

Question

我有一个包含动态生成的列表项的列表。现在我想将列表拆分为2列。我是html，js等新手......我真的不知道该怎么做。如果有人能帮助我会很好。

这是我的代码：

<ul class="sub-menu">
  <ul class="inner-sub-menu">
    {% for submenu in menuItem.submenu %}
    <li class="sub-li-item">
      {{ render( controller( "ez_content:viewLocation", {"locationId": submenu.location.id, "viewType": "sub-menu"} ) ) }}
    </li>
    {% endfor %}
  </ul>
  <ul class="inner-sub-menu-second">
  </ul>
</ul>

修改

我得到了解决方案。你必须将长度除以2然后检查长度是否高于6.然后关闭ul标签并打开另一个标签。

{% if menuItem.submenu|length > 0 %}
                {% set secondColumn = (menuItem.submenu|length / 2)|round(0, 'ceil') %}
                <div class="sub-menu">
                    <ul class="inner-sub-menu">
                    {% for submenu in menuItem.submenu %}
                        {% if (loop.index0 == secondColumn) and menuItem.submenu|length > 6 %}
                            </ul><ul class="inner-sub-menu">
                        {% endif %}
                        <li class="sub-li-item">
                            {{ render( controller( "ez_content:viewLocation", {"locationId": submenu.location.id, "viewType": "sub-menu"} ) ) }}
                        </li>
                    {% endfor %}
                    </ul>
                </div>
            {% endif %}