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>

根据li类对ul重新排序

2 个答案: