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

Question

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

我需要一种编程方式来移动部分列表项，以便每个项都位于作为其父项的类别列表项之后。正如下面的示例代码有助于说明的那样，部分列表项根据属性值的比较与特定的类别列表项配对。更具体地说，当部分列表项的 categoryid 与类别列表项的 catid 匹配时，该部分列表项 'belongs' 到该类别并且应该被移动以使其位于（如一个兄弟姐妹）就在类别之后。

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

执行移动后，每个类别的结构应类似于下面的示例代码。如您所见，第一个列表项是类别 (class = 'cat')，随后的项是属于该类别的相应部分 (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>

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

jQuery: Move list items based on attribute matches

jquery

attributes

list