jQuery ：在多组列表项 <li></li> 周围包装单独的 <ul></ul> 标签集

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

创建两个列表后，我然后使用 jQuery appendTo 方法将第二个 UL 中的列表项移动到第一个 UL 中的适当位置 UL.Here 是移动个别部分：

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

您应该在 class="cat" 列表项中嵌套一个 UL 元素，然后将子元素附加到该 UL 元素。

在类别中嵌套 UL 元素，请注意下面 html var 中的新 UL 元素

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"));

Answer 2

我设法通过向我的 'let html' 语句添加一组外部 <ul></ul> 标记来完成我想要的，如下所示：

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

现在，每个父列表项都包含在一个单独的无序列表中。

再次感谢您提供的反馈。

jQuery ：在多组列表项 <li></li> 周围包装单独的 <ul></ul> 标签集

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

ajax

jquery

append

html-lists