嵌套的UL包裝

我得到一個HTML字符串，我需要解析（將在Flash中使用），通過以嵌套級別爲基礎遞增left-margin值的跨度包裝嵌套的UL標籤。嵌套的UL包裝

前：

<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解決方案，但我認爲必須有一些優雅的方式來做到這一點。

來源

2010-02-10 Makram Saleh

你有什麼樣的可怕的系統，需要你用span元素來包裝ul元素（假設span元素可能沒有兒童的ul元素）？ – Quentin 2010-02-10 15:57:56

由於它們嵌套頁邊距不應該遞增。每一個從它的巢穴水平開始，因此將添加到當前的利潤率..

把left-margin:30px;所有跨度應該這樣做..

不知道如果你有其他的CSS定義，可能會干擾，雖然..所以請詳細說明..

來源

2010-02-10 13:49:50

我需要增加邊距，因爲我將在Flash文本字段中使用它，該文本字段不像瀏覽器那樣呈現HTML。 – 2010-02-10 14:01:09

也許這樣。把嵌套列表中的一些容器元素並運行此該容器元素：

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屬性現在抱你需要的字符串。

來源

2010-02-10 15:55:26

對於只CSS的解決方案：

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

不漂亮/通用/你問什麼，但它至少是非常簡單的，可能是不夠好。

來源

2010-02-10 16:00:16 Wim

由於這將在Flash中使用，我不能像上面那樣使用CSS。 – 2010-02-11 06:58:28

回答

相關問題