jQuery：根据属性匹配移动列表项

Question

我正在构建一个分层菜单，其中包含 6 个类别（在顶层）和总共 50 个部分（作为子项）。菜单的数据来自 2 个单独的 JSON 文件——一个用于类别，一个用于部分。 AJAX 调用检索数据并将其转储到我的 HTML 中的 2 个单独的 UL 列表中：一个用于类别列表，一个用于部分。

我需要一种编程方式来移动部分列表项，以便每个项都位于作为其父项的类别列表项之后。正如下面的示例代码有助于说明的那样，部分列表项与基于属性值比较的特定类别列表项配对。更具体地说，当 Section 列表项的 categoryid 与 Category 列表项的 catid 匹配时，该 Section 列表项“属于”该 Category 并且应该移动以便它位于（作为同级）紧随类别。

<ul id="categories">
    <ul class="category"><li class="cat" catid="360002246652"><a>Category1</a></li></ul>
    <ul class="category"><li class="cat" catid="360002246672"><a>Category2</a></li></ul>
    <ul class="category"><li class="cat" catid="360002254991"><a>Category3</a></li></ul>
    <ul class="category"><li class="cat" catid="360002255011"><a>Category4</a></li></ul>
    <ul class="category"><li class="cat" catid="360002255031"><a>Category5</a></li></ul>
    <ul class="category"><li class="cat" catid="360002255051"><a>Category6</a></li></ul>
</ul>

<ul id="sections">
    <ul class="section"><li class="sec" secid="360008584672" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1a</a></li></ul>
    <ul class="section"><li class="sec" secid="360007912231" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1b</a></li></ul>
    <ul class="section"><li class="sec" secid="360007060252" categoryid="360002254991" parentsecid="null"><a href="https://MyURL">Section3a</a></li></ul>
    <ul class="section"><li class="sec" secid="360007106591" categoryid="360002254991" parentsecid="null"><a href="https://MyURL">Section3b</a></li></ul>
</ul>

执行移动后，每个类别的结构应如下面的示例代码所示。如您所见，第一个列表项是 Category (class = 'cat')，随后的项是属于该 Category 的相应 Sections (class = 'sec')：

<ul class="category">
    <li class="cat" catid="360002246652"><a>Category1</a></li>
    <li class="sec" secid="360007912231" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1a</a></li>
    <li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1b</a></li>
    <li class="sec" secid="360007106191" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1c</a></li>
    <li class="sec" secid="360007106171" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1d</a></li>
</ul>

这是对代码的尝试。控制台中没有显示错误，但列表项的迁移不会发生：

var catid = $("li.cat['catid']");
$("ul.section li.sec['categoryid']").each(function() {
    if ($(this) == catid) { 
    $(this).insertAfter(catid);
    }   
});

提前感谢您对此提供的任何反馈。

Answer 1

你可以这样做：

$(".sec").each(function() {
  let catid = $(this).attr("categoryid");
  $(".cat").each(function() {
    if ($(this).attr("catid") == catid) {
      $(this).after($("li.sec[categoryid=" + catid + "]"));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="categories">
  <ul class="category">
    <li class="cat" catid="360002246652"><a>Category1</a></li>
  </ul>
  <ul class="category">
    <li class="cat" catid="360002246672"><a>Category2</a></li>
  </ul>
  <ul class="category">
    <li class="cat" catid="360002254991"><a>Category3</a></li>
  </ul>
  <ul class="category">
    <li class="cat" catid="360002255011"><a>Category4</a></li>
  </ul>
  <ul class="category">
    <li class="cat" catid="360002255031"><a>Category5</a></li>
  </ul>
  <ul class="category">
    <li class="cat" catid="360002255051"><a>Category6</a></li>
  </ul>
</ul>

<ul id="sections">
  <ul class="section">
    <li class="sec" secid="360008584672" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1a</a></li>
  </ul>
  <ul class="section">
    <li class="sec" secid="360007912231" categoryid="360002246652" parentsecid="null"><a href="https://MyURL">Section1b</a></li>
  </ul>
  <ul class="section">
    <li class="sec" secid="360007060252" categoryid="360002254991" parentsecid="null"><a href="https://MyURL">Section3a</a></li>
  </ul>
  <ul class="section">
    <li class="sec" secid="360007106591" categoryid="360002254991" parentsecid="null"><a href="https://MyURL">Section3b</a></li>
  </ul>
</ul>