javascript - 如果超过 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 %}