JQuery List Traversée à l'aide de sélecteurs ou de méthodes help

Question

J'ai un peu de difficulté à parcourir une liste non ordonnée et à récupérer les éléments de la liste.

foreach (MyTypeObject s in result) 
     { 

      oList.Clear(); 

      { 


      oList.AppendFormat("<ul id='OuteroListItems'>"); 
      oList.AppendFormat("<li>"); 
      oList.AppendFormat("<ul id='oListItems'>"); 
      oList.AppendFormat("<li>" + s.Name + "</li>"); 
      oList.AppendFormat("<li>" + s.NameDesc + "</li>"); 
      oList.AppendFormat("<li>" + s.StartDate + "</li>"); 
      oList.AppendFormat("<li>" + s.EndDate + "</li>"); 
      oList.AppendFormat("</ul>"); 
      oList.AppendFormat("</li>"); 
      oList.AppendFormat("</ul>"); 

      sb.Append(oList); 


     } 

ok, j'ai essentiellement une liste d'éléments dans une liste non ordonnée et une liste non ordonnée la tenue d'une liste des articles qui contiennent des éléments initself.

Pour chacun d'entre eux, je suis en train de choisir la date de début

donc dire que j'avais 3 listes à puces à l'intérieur des « OuteroListItems », je voudrais tout sélectionner trois de ces s.StartDates et les couleur rouge dans 'oListItems'.

Je l'ai essayé mais il ne sélectionne que le premier élément dans les listes extérieures 3ème élément de liste interne et la coloration rouge.

$("ul#OuteroListItems li").each(function(){ 

    $("ul#oListItems li:eq(2)").css("color", "red"); 

    }); 

Answer 1

Vous devez d'abord utiliser la classe au lieu d'ID :) IDs have to be unique ou vous aurez toutes sortes de comportements ... génial quand ils ne sont pas unique, il est HTML invalide, il suffit de changer id= dans votre code à class= réparer ça. Votre sortie devrait ressembler à ceci:

<ul class='OuteroListItems'> 
    <li> 
    <ul class='oListItems'> 
     <li>s.Name</li> 
     <li>s.NameDesc</li> 
     <li>s.StartDate</li> 
     <li>s.EndDate</li> 
    </ul> 
    </li> 
</ul> 

Ensuite, vous pouvez utiliser le sélecteur suivant pour obtenir chaque StartDate <li>:

$(".oListItems li:nth-child(3)").css("color", "red");​ 

You can see a working example here