Html 帮助 -- 嵌套的 UL 和 LI答案

【问题标题】：Html help -- nested ULs and LIsHtml 帮助 -- 嵌套的 UL 和 LI
【发布时间】：2018-05-18 20:13:13
【问题描述】：

我想实现这样的目标：

<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 循环中的之前添加 .. 但这需要打开.. 结束标记需要在编写该迭代的最后一个标记之后。所以我认为可能是另一个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

【问题讨论】：

你使用的是哪个 MVC 框架？
Creating javascript loop in html的可能重复

标签： html

【解决方案1】：

这应该循环通过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 的一般方法。

【讨论】：

在编辑中添加了一个额外的例子。它使用带有箭头函数的forEach() 进行循环。遗憾的是，它不会在 <script /> 标签上运行，OP，但将您的 js 移动到 js 文件进行调试总是很好的。也许只是我:)
OP，这就是你的答案。请记住始终选择一个作为正确的解决方案：P
我尝试应用上述内容，但出现以下错误：1. listItem in the @for does not exist in the current context 2. Too many characters in character literal. 我不确定如何继续。

【解决方案2】：

对上面的答案稍作修改，使其适用于剃须刀循环： `

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

    </script>

【讨论】：