使用 javascript 创建动态多级 html 菜单

Question

我希望创建一个有两个级别的菜单。从父母到孩子再到孙子。

我无法更改 html，因为数据是动态的，但在某些时候它总是有两个级别。

我正在尝试将用<ul></ul> 包裹的子类项目添加到parent 和grandchild 类项目到child。

所以基本上我只是想从动态数据创建一个简单的菜单。我试图用经典的 asp 对其进行硬编码，但遇到了一些麻烦，我认为用 JavaScript 会更容易一些。

$(document).ready(function(){
    var i, wrap, wrap_number = 0;
    $('li').each(function(){
        var li = $(this);
        if (li.is('.child')) {
            wrap = 'entry_wrap_' + wrap_number;
            li.addClass(wrap);
        } else {
            wrap_number++;
        }
    });
    
    for (i = 0; i <= wrap_number; i++) {
        wrap= 'entry_wrap_' + i;
        $('.' + wrap).wrapAll('<ul/>').removeClass(wrap);
        console.log("i worked+")
    }
        
    // ----
    var i, wrap, wrap_number = 0;
    
    $('li').each(function(){
        var li = $(this);
        if (li.is('.grandchild')) {
            wrap = 'entry_wrap_' + wrap_number;
            li.addClass(wrap);
        } else {
            wrap_number++;
        }
    });
    
    for (i = 0; i <= wrap_number; i++) {
        wrap= 'entry_wrap_' + i;
        $('.' + wrap).wrapAll('<ul/>').removeClass(wrap);
        console.log("i worked+")
    }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="parent"><b>Menugroup</b></li>
        <li class="child">item1</li>
        <li class="child">item2</li>
        <li class="child">item3group</li>
            <li class="grandchild">item4</li>
            <li class="grandchild">item5</li>
            <li class="grandchild">item6</li>
        <li class="child">item7</li>
        <li class="child">item8</li>
    <li class="parent"><b>Menugroup</b></li>
        <li class="child">item9</li>
        <li class="child">item10</li>
    <li class="parent"><b>Menugroup</b></li>
        <li class="child">item11</li>
</ul>

我以为我会用 <ul></ul> 包装相邻的项目，具有相同的类名。

结果如下：

Menugroup
    item1
    item2
    item3group
    item4
    item5
    item6
    item7
    item8
Menugroup
    item9
    item10
Menugroup
    item11

很接近，但还不够。因为grandchild 项目与child 项目是分开的。这是因为 li 标签在 grandchild ul 标签打开之前关闭。看看我要解释什么here。

最终目标是这样的标记：

Menugroup
    item1
    item2
    item3group
        item4
        item5
        item6
    item7
    item8
Menugroup
    item9
    item10
Menugroup
    item11

如果有人能指出我正确的方向，我将不胜感激。我主要是用js/jquery寻找解决方案。

Answer 1

新一代的孩子应该被包裹在<ul> 标记中。 所以你的 HTML 应该是这样的：

<ul>
    <!-- Parent -->
    <li class="parent"><b>Menugroup</b></li>

    <!-- Children wrapped in <ul> -->
    <ul>
        <!-- Children -->
        <li class="child">item1</li>
        <li class="child">item2</li>
        <li class="child">item3group</li>

        <!-- Grandchildren wrapped in ul -->
        <ul>
            <li class="grandchild">item4</li>
            <li class="grandchild">item5</li>
            <li class="grandchild">item6</li>
        </ul>

        <!-- More Children -->
        <li class="child">item7</li>
        <li class="child">item8</li>
    </ul>

    <!-- Parent -->
    <li class="parent"><b>Menugroup</b></li>

    <!-- Children wrapped in <ul> -->
    <ul>
        <li class="child">item9</li>
        <li class="child">item10</li>
    </ul>

    <!-- Parent -->
    <li class="parent"><b>Menugroup</b></li>

    <!-- Children wrapped in <ul> -->
    <ul>
        <li class="child">item11</li>
    </ul>
</ul>

注意：我只提供了一个示例，说明您的 HTML 应该是什么。但是，我不太擅长 JQuery，所以我无法提供您应该使用的 Jquery。希望我的回答能给你一些帮助。