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

Question

我正在处理两类不同的无序列表（a 岚，巗峃，。 阶级和 栏目 类）。) 每个 <li> Categories列表中的实例有一个'catid'属性，有一个特定的数值分配。每个 <li> 在Sections列表中的实例有一个'categoryid'属性，有一个特定的数值分配。下面的简略代码片段说明了这种结构。

<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'值之间的所有匹配。

一旦找到了匹配值，我就需要移动每个Section列表项(类为'sec')，使其位于匹配的Category列表项(类为'cat')的正下方。我假设这可以通过使用 插入后 方法。

用 "逻辑 "术语来重申我的挑战：我需要比较两个集合（Category和Section）的所有成员，以确定两个不同属性（'catid'和'categoryid'）的匹配数值。我需要比较两个集合（Category和Section）的所有成员，以确定两个不同属性（'catid'和'categoryid'）的匹配数值。一旦确定了匹配值，我就需要移动Section集的所有成员，使每个成员都位于Category集的匹配成员的正下方。

我明白这个逻辑，只是不知道具体的编码语法，也不知道如何构造条件jQuery语句来运行比较，然后移动所有的成员。<li> 项目相应。

预先感谢您在这里提供的任何帮助。

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