根據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>