jQuery: обернуть отдельные наборы тегов <ul></ul> вокруг нескольких групп элементов списка <li></li>

Question

Я строю иерархическое меню, которое опирается на AJAX для извлечения данных из файла JSON. Я делаю два отдельных AJAX вызова - каждый создает отдельный неупорядоченный список (UL). Вот вызовы AJAX:

//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');

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

//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']"));

После перемещения есть 6 родительских списков, каждый из которых содержит несколько дочерних элементов списка. (Структура показана на прикрепленном снимке экрана.)

Теперь я хотел бы обернуть каждый набор дочерних элементов списка в его собственный набор

тегов для создания правильного вложенного неупорядоченного списка в каждом случае.

Заранее благодарим за любую помощь, которую вы можете предложить по этому вопросу.

Answer 1

Мне удалось выполнить sh то, что я хотел, добавив внешний набор тегов <ul></ul> в мой оператор let html следующим образом:

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

Теперь каждый родительский элемент списка заключен в отдельный неупорядоченный список.

Еще раз спасибо за предоставленный отзыв.

Answer 2

Вы должны вложить элемент UL в элементы списка class = "cat", а затем добавить дочерние элементы к этому элементу UL.

Вложить элемент UL в категории, обратите внимание на новый элемент UL в html var ниже

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

, затем добавьте к этому вложенному UL, используя

$("li[categoryid|='360002246652']").appendTo( $("li[catid|='360002246652'] ul"));