Question

我有一个HTML字符串，我需要解析（在Flash中使用），方法是将嵌套的UL标记用基于嵌套级别增加left-margin值的范围包装。

之前：

<ul>
    <li>Item one</li>
    <li>Item two:
        <ul>
            <li>One</li>
            <li>Two
                <ul>
                    <li>One</li>
                    <li>Two</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item three
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </li>
    <li>Item four</li>
</ul>

后：

<span style="left-margin:0px">
    <ul>
        <li>Item one</li>
        <li>Item two:
            <span style="left-margin:30px">
                <ul>
                    <li>One</li>
                    <li>Two
                        <span style="left-margin:60px">
                            <ul>
                                <li>One</li>
                                <li>Two</li>
                            </ul>
                        </span>
                    </li>
                </ul>
            </span>
        </li>
        <li>Item three
            <span style="left-margin:30px">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                </ul>
            </span>
        </li>
        <li>Item four</li>
    </ul>
</span>

注意增加的值：0,30,60 ......

我做了一个（令人讨厌的）ActionScript解决方案，但我认为必须有一些优雅的方法来实现它。

Answer 1

由于它们是嵌套的，因此边距不应该增加..每一个都从它的嵌套级别开始，因此它会添加到当前边距。

将left-margin:30px;放到所有范围内应该这样做..

不确定您是否有其他CSS定义可能会干扰它，但是..请详细说明..

Answer 2

也许是这样的。将嵌套列表放在某个容器元素中，然后在该容器元素上运行：

function recursiveIndentation(element, indentation, increasingIndentation) {
    for (var i = 0; i < element.childNodes.length; i = i + 1) {
        if (element.childNodes[i].nodeName === "UL") {
            var span = document.createElement("SPAN");
            span.style.marginLeft = indentation + "px";
            element.insertBefore(span, element.childNodes[i])
            span.appendChild(element.childNodes[i + 1]);
            recursiveIndentation(span.childNodes[0], indentation + increasingIndentation, increasingIndentation);
        } else {
            recursiveIndentation(element.childNodes[i], indentation, increasingIndentation);
        }
    }
}

容器元素的innerHtml属性现在将包含您需要的字符串。

Answer 3

对于仅限CSS的解决方案：

ul { margin-left: 0 }
ul ul { margin-left: 30px }
ul ul ul { margin-left: 60px }
ul ul ul ul { margin-left: 90px }

不漂亮/通用/你要求的东西，但它至少非常简单，可能还不错。

嵌套的UL包装

3 个答案: