根据li类对ul重新排序

Question

我确信这很简单，但可惜我现在没有看到它。 我有一个带有列表项的菜单。 其中一些具有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的内容，但是我现在还没有使用正确的方法。

Answer 1

您可以这样做：

 $('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> 

Answer 2

试试jQuery.appendTo() 。 不需要显式的循环和临时数组，因为这会将匹配的元素从一个容器移动到另一个容器。

 $('ul > li.col-1').appendTo('ul.parent > ul.first'); $('ul > li.col-2').appendTo('ul.parent > ul.second'); 

 ul.first { background-color: lightgray; } ul.second { background-color: lightgreen; } 

 <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> <ul class="parent"> <ul class="first"></ul> <ul class="second"></ul> </ul>