Question posted in
You can find the official documentation here.

jQuery : Wrap separate sets of <ul></ul> tags around multiple groups of list items <li></li> – Jquery ajax

I am building a hierarchical menu that relies on AJAX to pull data from a JSON file. I make two separate AJAX calls — each one creating a separate unordered list (UL). Here are the AJAX calls:

//AJAX calls to the Category JSON file
var $requestcategories = $.ajax({
url: 'https://MyURL/categories.json',
dataType: 'json',
type: 'get',
cache: 'false',
success: function(data) {
let $ul = $('<ul id="categories" />'); 
let html = data.categories.map(c => `<li class="cat" catid=${c.id}><a href="#">${c.name}</a></li>`);
$ul.append(html).appendTo('#testnav');
}
});


//AJAX calls to the the Section JSON file
var $requestsections = $.ajax({
url: 'https://MyURL/sections.json',
dataType: 'json',
type: 'get',
cache: 'false',
success: function(data) {
let $ul = $('<ul id="sections" />');
let html = data.sections.map(s => `<li class="sec" secid=${s.id} categoryid=${s.category_id} 
parentsecid=${s.parent_section_id}><a href="${s.html_url}">${s.name}</a></li>`);
$ul.append(html).appendTo('#testnav');

Once the two lists are created, I then use the jQuery appendTo method to move the list items in the second UL to their appropriate locations in the first UL.Here is the code that moves the individual sections:

//Code that moves each individual section to its parent category
$("li[categoryid|='360002246652']").appendTo( $("li[catid|='360002246652']"));
$("li[categoryid|='360002246672']").appendTo( $("li[catid|='360002246672']"));
$("li[categoryid|='360002254991']").appendTo( $("li[catid|='360002254991']"));
$("li[categoryid|='360002255011']").appendTo( $("li[catid|='360002255011']"));
$("li[categoryid|='360002255031']").appendTo( $("li[catid|='360002255031']"));
$("li[categoryid|='360002255051']").appendTo( $("li[catid|='360002255051']"));

After the move, there are 6 parent lists, each with a number of child list items. (The structure is seen in the attached screen shot.)

List Structure

What I would like to do now is wrap each set of child list items within its own set of

    tags so as to create a proper nested unordered list in each case.

    Thanks in advance for any help you can offer up on this.

    Tags:

    2

    Answers


    1. Chosen as BEST ANSWER
      0

      I managed to accomplish what I wanted by adding an outer set of <ul></ul> tags to my 'let html' statement as follows:

      let html = data.categories.map(c => `<ul><li class="cat" catid=${c.id}><a 
href="#">${c.name}</a></li></ul>`);

      Now, each parent list item is encased within a separate unordered list.

      Thanks again for the feedback that was provided.

      Separate unordered lists


    2. 0

      You should nest a UL element in your class=”cat” list items, then append the children to that UL element.

      Nest UL element within the categories, note the new UL element in the html var below

      let html = data.categories.map(c => `<li class="cat" catid=${c.id}><a href="#">${c.name}</a><ul></ul></li>`);

      then append to that nested UL using

      $("li[categoryid|='360002246652']").appendTo( $("li[catid|='360002246652'] ul"));
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search