Question

使用javascript和jQuery，我将浏览器中呈现的表格转换为列表。所以我有......

<ul id="side-navigation">
    <li></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li3"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li3"></li>
    <li class="li2"></li>
    <li></li>
    <li></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li2"></li>
    <li class="li3"></li>
    <li class="li3"></li>
    <li class="li3"></li>
    <li></li>
</ul>

但我想根据他们的类创建嵌入式列表。像这样......

<ul id="side-navigation">
    <li>
        <ul>    
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2">
                <ul>
                    <li class="li3"></li>
                </ul></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2">
                <ul>
                    <li class="li3"></li>
                </ul></li>
            <li class="li2"></li>
        </ul></li>
    <li></li>
    <li>
        <ul>
             <li class="li2"></li>
             <li class="li2"></li>
        </ul>
   </li>
    <li>
        <ul>    
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2">
                <ul>
                    <li class="li3"></li>
                    <li class="li3"></li>
                    <li class="li3"></li>
                </ul></li>
        </ul>
    </li>
    <li></li>
</ul>

在这个网页设计师之前，不是程序员，试图弄清楚如何，我认为一些聪明的人可能会有一个建议。谢谢！

Answer 1

只需添加一个jquery脚本来解析当前标签并在标记之前/之后添加

$( ".li3" ).before( "<ul>" );
$( ".li3" ).after( "</ul>" );

这可能不是最好的解决方案，但应该有效

Answer 2

从语义上讲，将任何html放在ol或ul内的li元素中是一种很好的做法。例如。

<ul>
    <li>
        Hello
    </li>
    <li>
        <ul>
            <li>World</li>
        </ul>
    </li>
</ul>

因此，我相信你应该这样做：

$( ".li3" ).append('<ul><li class="yourClass">Your content here</li></ul>');

包装列表项以创建嵌入列表

2 个答案: