嵌套 UL 包装答案

【问题标题】：Nested ULs wrapping嵌套 UL 包装
【发布时间】：2010-02-10 13:39:41
【问题描述】：

我得到了一个需要解析的 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 解决方案，但我认为必须有一些优雅的方法来做到这一点。

【问题讨论】：

你有什么样的可怕系统需要你用 span 元素包装 ul 元素（假设 span 元素可能没有 ul 元素作为子元素）？

标签： javascript actionscript

【解决方案1】：

由于它们是嵌套的，所以边距不必增加..每个都从其嵌套级别开始，因此它会添加到当前边距..

将left-margin:30px; 放入所有跨度应该可以做到这一点..

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

【讨论】：

我需要增加边距，因为我将在 Flash 文本字段中使用它，它不会像浏览器那样呈现 HTML。

【解决方案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 属性现在将包含您需要的字符串。

【讨论】：

【解决方案3】：

对于纯 CSS 解决方案：

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

不漂亮/通用/您要求的，但它至少非常简单并且可能足够好。

【讨论】：

因为这个会在flash中使用，所以我无法像上面那样使用CSS。