我相信这很简单，但遗憾的是我现在没有看到它。我有一个包含列表项的菜单。其中一些具有 col-1 类，而其他一些具有 col-2 类。我试图遍历每个列表项并将它们分成两个新的<ul>'s，然后用<ul>两个新的<ul>'s.
这是我当前的 html：
<ul>
<li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#"><a href="#">Blah</a></a>
</li>
</ul>
这是我想要实现的输出：
<ul>
<li>
<ul class="col-1">
<li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
</ul>
</li>
<li>
<ul class="col-2">
<li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#"><a href="#">Blah</a></a>
</li>
</ul>
</li>
</ul>
我知道我需要用新的 li 替换 ul 的内容，但我认为此时我什至没有使用正确的方法。
你可以这样做：
$('ul')
.append($('<li>').append($('<ul class="col-1">').append($('ul .col-1'))))
.append($('<li>').append($('<ul class="col-2">').append($('ul .col-2'))))ul {
border: solid 1px;
margin: 4px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#"><a href="#">Blah</a></a>
</li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句