JQuery List Traversal using selectors or methods help

Question

Hey Guys,

I'm basically having a bit of trouble with traversing through an unordered list and retreiving list items.

  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, I basically have a list of items in one unordered list and then an unordered list holding a list of items which hold items initself.

For each one of these I am trying to select the start date

so say I had 3 unordered lists inside of 'OuteroListItems', i would want to select all 3 of these s.StartDates and color them red in 'oListItems'.

I've tried this but it only select the first element in the outer lists 3rd inner list element and coloring that red.

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

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

    });

Answer 1

First you need to use class instead of ID :) IDs have to be unique or you'll get all sorts of funky behavior...when they're not unique it's invalid HTML, just change id= in your code to class= to fix this. Your output should now look like this:

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

Then you can use the following selector to get each StartDate <li>:

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

You can see a working example here

Answer 2

Take a look on one of the powerful features of jQuery, the traversal methods.

http://www.jaftalks.com/Home/Show/Introduction-to-JQuery-Traversal-Methods