Назначение CSSClass каждому элементу li в неупорядоченном списке программно

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>

Я хочу превратить его в

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

вышеуказанный формат Программно используя asp.net/C# или jquery, просматривая каждый элемент 'li' и назначая класс css, теги привязки и т. Д. Приведенный выше неупорядоченный список является только примером. из базы данных и преобразования их в неупорядоченный список. Может кто-нибудь предложить, как мне это сделать?

UPDATE:

Я использую следующий код в коде 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. Используя поле глубины, я связываю данные с неупорядоченным списком

Заранее спасибо.

Answer 1

JavaScript:

Вы можете использовать свойство DOMObject .innerHTML для чтения / записи. Или .append () в jQuery.
Для атрибутов DOMObject .setAttribute () должен получить вас полностью.

Проверьте этот документ JQuery и этот .

Мне не хватает какой-то функциональности, которую вы хотели?

Answer 2

вы делаете не то.

вместо этого подхода, я бы предложил другой

1. Создать элемент ul с идентификатором или классом
2. используйте этот идентификатор или класс в вашей таблице стилей

например,

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

Тогда ваши записи будут отображаться правильно.