Attribution d'une classe CSS à chaque élément li dans une liste non ordonnée par programme

Question

J'ai une liste non ordonnée quelque chose comme ça.

<ul class="simpleTree">  
    <li>  
    <span>root</span> 
    <ul> 
    <li > 
    <span>Tree Node 1</span> 
    <ul> 
    <li> 
    <span>Tree Node 1-1</span> 
    <ul> 
    <li> 
    <span>Tree Node Ajax 1</span> 
    </li> 
    <li> 
    <span>Tree Node Ajax 2</span> 
    </li> 
    </ul> 
    </li> 
    <li> 
    <span>Tree Node 1-1</span> 
    <ul> 
    <li> 
    <span>Tree Node Ajax 1</span> 
    </li> 
    <li> 
    <span>Tree Node Ajax 2</span> 
    </li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
</ul> 

Je veux la transformer en

<ul class="simpleTree"> 
    <li class="root"> 
    <span> 
    <a href="#"title="root">root</a</span>         <ul>            <li class="open"> 
<span><a href="test.html" title="this is the title">Tree Node 1</a></span> 
<ul> 
<li><span>Tree Node 1-1</span>          <ul>           <li> 
<span class="text"><a href="test.html" title="this is the title">Tree Node Ajax 1</a></span> 
</li>           <li> 
<span class="text"><a href="test2.html" title="this is the title for the second page">Tree Node Ajax 2</a></span> 
</li>           </ul> 
              </li> 
              <li><span>Tree Node 1-1</span> 
              <ul> 
              <li><span class="text"><a href="test.html" title="this is the title">Tree Node Ajax 1</a></span> 
</li>           <li> 
<span class="text"><a href="test2.html" title="this is the title for the second page">Tree Node Ajax 2</a></span> 
</li>           </ul>           </li>           </ul> 
</li> 
</ul>  
</li> 
</ul> 

le format ci-dessus en utilisant asp.net/C# ou Programmatically jquery par une boucle à travers chaque élément 'li' et l'attribution d'une classe css, les balises d'ancrage, etc. La liste ci-dessus non ordonnée est juste un exemple. En fait, je récupère environ 600 enregistrements de la base de données et les transforme en liste non ordonnée. Quelqu'un pourrait suggérer comment faire?

MISE À JOUR:

J'utilise le code suivant dans asp.net codebehind pour générer un unorderedList à partir des enregistrements de base de données.

int lastDepth = -1; 
     int numUL = 0; 

     StringBuilder output = new StringBuilder(); 


     foreach (DataRow row in ds.Tables[0].Rows) 
     { 

      int currentDepth = Convert.ToInt32(row["Depth"]); 

      if (lastDepth < currentDepth) 
      { 
       if (currentDepth == 0)      
        output.Append("<ul class=\"simpleTree\">");      

       else 
        output.Append("<ul>"); 
       numUL++; 
      } 
      else if (lastDepth > currentDepth) 
      { 
       output.Append("</li></ul></li>"); 
       numUL--; 
      } 
      else if (lastDepth > -1) 
      { 
       output.Append("</li>"); 
      } 

      output.AppendFormat("<li><span>{0}</span>", row["name"]); 

      lastDepth = currentDepth; 
     } 

     for (int i = 1; i <= numUL; i++) 
     { 
      output.Append("</li></ul>"); 
     } 
literal1.text=output.ToString(); 

Dans ma table de base de données que j'ai le nom, la profondeur feild.Using la Feild « profondeur » Je suis la liaison de données à la liste non ordonnée

Merci à l'avance.

Answer 1

JavaScript:

Vous pouvez utiliser le DOMObject .innerHTML propriété en lecture/écriture. Ou, .append() de jQuery.
Pour les attributs, le DOMObject .setAttribute() devrait vous permettre d'aller jusqu'au bout.

Découvrez this piece of jQuery documentation et this.

Est-ce que certaines fonctionnalités me manquent?

Answer 2

vous faites la mauvaise chose.

au lieu de cette approche, je suggère un autre un

1. Generate l'élément ul avec un identifiant ou une classe
2. utilisation que id ou classe dans votre feuille de style

pour exemple

<ul>  
    <li>  
    <span>root</span> 
    <li> 
</ul> 

je voudrais générer comme

<ul class='mylist'>  
    <li>  
    <span>root</span> 
    <li> 
</ul> 

mon css contiendrait

ul.mylist { 
write your style properties 
} 

ul.mylist li{ 
write your style property for li element 
} 

Ensuite, vos enregistrements seront affichés correctement.