Enveloppe ULs emboîtée

Question

J'ai obtenu une chaîne HTML que j'ai besoin d'analyser (à utiliser dans Flash), en enveloppant les balises UL imbriquées d'une plage avec une valeur left-margin incrémentée basée sur le niveau d'imbrication.

Avant:

<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> 

Après:

<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> 

Notez la valeur incrémentée: 0, 30, 60 ...

J'ai fait un (méchant) ActionScript solution, mais je pense qu'il doit y avoir une façon élégante de le faire.

Answer 1

Puisqu'ils sont imbriqués les marges ne doivent pas être incrémentée .. chacun commence à partir de son niveau de nid de sorte qu'il ajouterait à la marge actuelle ..

Mettre left-margin:30px; à tous empan devrait le faire ..

Vous ne savez pas si vous avez d'autres définitions CSS qui pourraient interférer avec cela, alors ... s'il vous plaît élaborer ..

Answer 2

Peut-être que ça. Mettez la liste imbriquée dans un élément de conteneur et exécuter sur cet élément de conteneur:

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); 
     } 
    } 
} 

L'attribut innerHtml de votre élément conteneur va maintenant contenir la chaîne dont vous avez besoin.

Answer 3

Pour une solution CSS seule:

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

Pas assez/générique/ce que vous avez demandé, mais il est au moins très simple et peut-être assez bon.