jquery - jQuery: Move list items based on attribute matches

Question

I am building out a hierarchical menu that consists of 6 Categories (at the top level) and perhaps 50 total Sections (as children). The data for the menu comes from 2 separate JSON files -- one for the Categories and one for the Sections. AJAX calls retrieve the data and dump it to 2 separate UL lists in my HTML: one list for the Categories and one for the Sections.

I need a programmatic way to move the Section list items so that each one sits just after the Category list item that is its parent. As the sample code below helps to illustrate, Section list items pair up with a particular Category list item based on a comparison of attribute values. More specifically, when the categoryid of a Section list item matches the catid of a Category list item, that Section list item 'belongs' to that Category and should be moved so that it sits (as a sibling) just after the 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>

Once the move has been executed, the structure for each Category should look like the sample code below. As you can see, the first list item is the Category (class = 'cat'), and the subsequent items are the corresponding Sections (class = 'sec') that fall under that Category:

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

Here is an attempt at the code. No errors show up in the console, but the migration of list items does not take place:

var catid = $("li.cat['catid']");
$("ul.section li.sec['categoryid']").each(function() {
    if ($(this) == catid) { 
    $(this).insertAfter(catid);
    }   
});

Thanks in advance for any feedback you can provide on this.

标签： jquerylistattributes

Answer 1

You can do it like this:

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