jQuery: найти совпадающие значения атрибутов в двух наборах списков, а затем соответственно переместить отдельные элементы списка

Question

Я работаю с двумя различными классами неупорядоченных списков (класс Категории и класс Sections ). Каждый экземпляр <li> в списке «Категории» имеет атрибут «catid» с заданным значением c цифра c. Каждый экземпляр <li> в списке разделов имеет атрибут categoryid с указанным значением c цифра c. Ниже приведен фрагмент сокращенного кода, иллюстрирующий эту конструкцию:

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

Мне нужен способ программирования c, чтобы посмотреть на ВСЕ <li> экземпляры в обоих родительских неупорядоченных списках (Категории / Разделы) и найти все совпадения. между значениями 'catid' и значениями 'categoryid'.

Как только совпадения найдены, мне нужно будет переместить каждый элемент списка Раздела (класс 'se c') так, чтобы он находился непосредственно под соответствующим элементом списка Категории (класс 'cat') , Я предполагаю, что это будет достигнуто с помощью метода insertAfter .

Чтобы повторить мою задачу в «логических» терминах: мне нужно сравнить всех членов двух наборов (Категория и Раздел) с определить совпадающие числовые значения c по двум различным атрибутам («catid» и «categoryid»). Как только совпадения определены, мне нужно переместить всех членов из набора Разделов так, чтобы каждый из них находился непосредственно под соответствующим элементом из набора Категорий.

Я получаю логи c, я просто не знаю точного синтаксиса кодирования и как построить условные операторы 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>