时间戳

首页 > 解决方案 > Html 帮助 -- 嵌套的 UL 和 LI

html - Html 帮助 -- 嵌套的 UL 和 LI

问题描述

我想实现这样的目标：

<li><a href="#">Item1</a>
                        <ul>
                            <li><a href="#">Item2</a></li>
                            <li>
                                <a href="#">Item3</a>
                                <ul>
                                    <li>
                                        <a href="#">Item4</a>
                                        <ul>
                                            <li>
                                                <a href="#">Item5</a>
                                                <ul>
                                                    <li>
                                                        <a href="#">Item6</a>
                                                        <ul>
                                                            <li> <a href="#">Item7</a> </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li> <a href="#">Item8</a> </li>
                        </ul>
                    </li>

项目 1 等是从字典中提取的，该字典可以根据用户输入进行更改。以下是我在视图中使用我的 MVC 应用程序尝试的内容：

    @foreach (var stp in Model.stepData)
{
        <li><a href="#">@stp.Key</a></li>
        <ul>
            @for (int i = 0; i < stp.Value.Count; i++)
    {
        <li><a href="#">@stp.Value[i]</a></li>

}
        </ul>
}

我知道我想在 @stp.Value 循环中的 < li > 之前添加 < ul > .. 但这需要打开.. 结束标记需要在编写该迭代的最后一个标记之后。所以我认为可能是另一个for循环来输入标签..但这根本不起作用。我有可能在 html 中实现这一点吗？我尝试过的代码：

@for (int i = 0; i < stp.Value.Count; i++)
    {
        <ul><li><a href="#">@stp.Value[i]</a></li>

}
@for(int i = 0; i<stp.Value.Count;i++){</ul>}

TIA 为您提供帮助。

尝试了下面的答案，但无法在循环内的当前上下文中找到 listItems，并且在使用 @for 时它还抱怨字符文字中的字符太多。

目标框架是.Net Core 2.0；MVC 5

标签： html

解决方案

这应该循环stp.Value并返回包装在li您的父标签内呈现的标签中的每个项目ul：

<ul id="myList">
    // stp.Value items here
</ul>

<script>
    var list = docment.getElementById('myList');
    var listItem = '';

    @for (int i = 0; i < stp.Value.Count; i++){
        listItem += '<li><a href="#">' + @stp.Value[i] + '</a></li>'
    }
    list.innerHTML = listItem;
</script>

大多数 MVC 框架都有自己的方法，但由于您没有指定您使用的是哪个框架，以上是使用 vanilla JS 的一般方法。

推荐阅读