정렬되지 않은 목록의 각 li 요소에 프로그래밍 방식으로 CSSClass 할당

Question

나는 이와 같은 순서가 지정되지 않은 목록이 있습니다.

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

난, 앵커 태그 등 각 '리'소자를 반복하고 CSS 클래스를 할당하여 프로그래밍 asp.net/C# jQuery와 사용

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

상기 포맷으로 변환 할 위의 정렬되지 않은 목록은 샘플 일뿐입니다. 기본적으로 데이터베이스에서 약 600 개의 레코드를 가져 와서 정렬되지 않은 목록으로 변환하고 있습니다. 누군가가 그 방법을 제안 할 수 있습니까?

업데이트 : 데이터베이스 레코드에서 unorderedlist를 생성하는 asp.net의 코드 숨김에서 다음 코드를 사용하고

. 내 데이터베이스 테이블에서

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

나는 '깊이'의 feild 내가 사전에 정렬되지 않은 목록에

감사 데이터 바인딩 오전 feild.Using 이름, 깊이를했습니다.

Answer 1

자바 스크립트 :

당신은/쓰기 속성을 읽어 .innerHTML DOMObject를 사용할 수 있습니다. 또는, jQuery의 .append().
속성의 경우 DOMObject .setAttribute()를 통해 모든 것을 얻을 수 있습니다.

this piece of jQuery documentation 및 this을 확인하십시오.

원하는 기능이 누락 되었습니까?

Answer 2

잘못된 것을하고 있습니다. 대신 그 접근 방식의

, 내가 다른 하나

1. 는 ID 또는 클래스
2. 사용 예에 ​​대한 스타일 시트

에서 해당 ID 또는 클래스와 UL 요소를 생성 제안

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

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

내 CSS는 귀하의 기록이 제대로 표시됩니다 다음

ul.mylist { 
write your style properties 
} 

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

포함됩니다.