jQuery: перемещение элементов списка на основе совпадений атрибутов

Question

Я строю иерархическое меню, которое состоит из 6 категорий (на верхнем уровне) и, возможно, 50 общих разделов (как дочерние). Данные для меню поступают из 2 отдельных файлов JSON - один для категорий и один для разделов. AJAX вызывает получение данных и выводит их в 2 отдельных списка UL в моем HTML: один список для категорий и один для разделов.

Мне нужен программный c способ перемещения раздела элементы списка, так что каждый из них находится сразу после элемента списка Category, который является его родителем. Как показывает пример кода, приведенного ниже, элементы списка разделов объединяются с определенным элементом списка категорий на основе сравнения значений атрибутов. Более конкретно, когда categoryid элемента списка Разделов соответствует catid элемента списка Категорий, этот элемент списка Разделов «принадлежит» этой Категории и должен быть перемещен так, чтобы он сидел (как брат) сразу после 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>

Как только перемещение выполнено, структура для каждой категории должна выглядеть как пример кода ниже. Как видите, первый элемент списка - это Категория (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>