jQuery:在两组列表中查找匹配的属性值，然后相应地移动各个列表项
jQuery:在两组列表中查找匹配的属性值，然后相应地移动各个列表项
提问于 2020-04-23 11:12:00
我正在处理两个不同类别的无序列表(一个类别类和一个区段类)。类别列表中的每个<li>实例都有一个“catid”属性，其中有一个特定的数值赋值。区段列表中的每个<li>实例都有一个带有特定数字值赋值的“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’值之间的所有匹配。
一旦找到匹配项，我将需要移动每个区段列表项(‘sec’类)，以便它直接位于匹配的类别列表项(‘cat’类)下面。我假设这将通过insertAfter方法来完成。
为了重申我在“逻辑”方面的挑战:我需要比较两个集合(类别和区段)的所有成员，以识别两个不同属性('catid‘和'categoryid')之间的匹配数值。一旦确定了匹配，我就需要将所有成员从区段集合中移出，以便每个成员都直接位于类别集匹配成员的下方。
我得到了逻辑，只是不知道确切的编码语法，以及如何构造运行比较所需的条件jQuery语句，然后相应地移动<li>项。
谢谢你能在这里提供的任何帮助。
回答 1
Stack Overflow用户
发布于 2020-04-23 11:31:39
你可以这样做：
$(".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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61395187
复制相关文章
相似问题
腾讯云开发者
