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

Question

我正在构建一个分层菜单，它由6个类别(在顶层(和可能总共50个部分(作为子部分(组成。菜单的数据来自两个独立的JSON文件——一个用于Categories，一个用于Sections。AJAX调用检索数据并将其转储到HTML中的两个独立的UL列表中：一个列表用于Categories，另一个用于Sections。

我需要一种程序化的方式来移动Section列表项，使每个项都位于其父项Category列表项之后。如下面的示例代码所示，Section列表项根据属性值的比较与特定的Category列表项配对。更具体地说，当Section列表项的categoryid与Category列表项的catid匹配时，该Section列表项"属于"该Category，应该移动，使其(作为同级(位于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'(，随后的项是属于该类别的相应部分(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>