jQuery：在两组列表中查找匹配的属性值，然后相应地移动单个列表项答案

【问题标题】：jQuery: Find matching attribute values across two sets of lists and then move individual list items accordinglyjQuery：在两组列表中查找匹配的属性值，然后相应地移动单个列表项
【发布时间】：2020-04-23 19:12:00
【问题描述】：

我正在使用两种不同类别的无序列表（Categories 类和 Sections 类）。类别列表中的每个<li> 实例都有一个带有特定数值分配的“catid”属性。 Sections 列表中的每个<li> 实例都有一个带有特定数值分配的“categoryid”属性。下面的缩写代码 sn-p 说明了这种结构：

<ul id = "categories">
<li class="cat" catid="360002254991"><a>Category A</a></li>

<li class="cat" catid="360002255011"><a>Category B</a></li>
</ul>

<ul id="sections">
<li class="sec" secid="360008584672" categoryid="360002246652"><a href="https://myURL">Section 1</a></li>

<li class="sec" secid="360007912231" categoryid="360002255011"><a href="https://myURL">Section 2</a></li>
</ul>

我需要一种编程方式来查看两个父无序列表（类别/部分）中的所有 <li> 实例，并找到“catid”值和“categoryid”值之间的所有匹配项。

找到匹配项后，我需要移动每个部分列表项（“sec”类），使其直接位于匹配的类别列表项（“cat”类）下方。我假设这将通过 insertAfter 方法来完成。

用“逻辑”术语重申我的挑战：我需要比较两个集合（类别和部分）的所有成员，以识别两个不同属性（“catid”和“categoryid”）的匹配数值。一旦确定了匹配项，我就需要从 Section 集中移动所有成员，以便每个成员直接位于 Category 集中匹配成员的下方。

我明白了逻辑，我只是不知道确切的编码语法以及如何构造运行比较所需的条件 jQuery 语句，然后相应地移动 <li> 项。

提前感谢您在此处提供的任何帮助。

【问题讨论】：

标签： jquery list attributes comparison

【解决方案1】：

你可以这样做：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="categories">
  <li class="cat" catid="360002254991"><a>Category A</a></li>
  <li class="cat" catid="360002255011"><a>Category B</a></li>
</ul>
<ul id="sections">
  <li class="sec" secid="360008584672" categoryid="360002246652"><a href="https://myURL">Section 1</a></li>
  <li class="sec" secid="360007912231" categoryid="360002255011"><a href="https://myURL">Section 2</a></li>
</ul>

【讨论】：