时间戳

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

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

问题描述

我正在使用两种不同类别的无序列表（Categories类和Sections类）。类别列表中的每个<li>实例都有一个带有特定数值分配的“catid”属性。Sections 列表中的每个<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”）之间的匹配数值。一旦确定了匹配项，我就需要从 Section 集中移动所有成员，以便每个成员直接位于 Category 集中匹配成员的下方。

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

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

标签： jquerylistattributescomparison

解决方案

你可以这样做：

$(".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>

推荐阅读