[jQuery] Need help on first JQuery nested list function

[Rose, Ryan]

Hello,

I am trying to write my first jquery function that works with a nested
list. 

 

I want to take something like this:

<ul id="nav">

  <li><a href="#">Home</a></li>

  <li><a href="#">Products</a>

    <ul>

      <li><a href="menu.html?page=1">Maecenas</a></li>

      <li><a href="#">Mauris sollicitudin</a></li>

      <li><a href="#">Mauris at enim</a></li>

    </ul>

  </li>

  <li><a href="#">Client list</a>

    <ul>

      <li><a href="#">Maecenas</a></li>

      <li><a href="#">Phasellus</a></li>

      <li><a href="#">Mauris at enim</a></li>

    </ul>

  </li>

  <li><a href="#">Case Studies &amp; References</a>

    <ul>

      <li><a href="#">Maecenas</a></li>

      <li><a href="#">Phasellus</a></li>

      <li><a href="#">Mauris at enim</a></li>

    </ul>

  </li>

</ul>

 

And transform it to this:

<ul id="nav">

  <li class="first"><a href="#">Home</a></li>

  <li class="active"><a href="#">Products</a>

      <ul>

        <li class="active"><a href="menu.html?page=1">Maecenas</a></li>

        <li><a href="#">Mauris sollicitudin</a></li>

        <li class="last"><a href="#">Mauris at enim</a></li>

      </ul>

  </li>

  <li><a href="#">Client list</a>

      <ul>

        <li class="first"><a href="#">Maecenas</a></li>

        <li><a href="#">Phasellus</a></li>

        <li class="last"><a href="#">Mauris at enim</a></li>

      </ul>

  </li>

  <li class="last"><a href="#">Case Studies &amp; References</a>

      <ul>

        <li class="first"><a href="#">Maecenas</a></li>

        <li><a href="#">Phasellus</a></li>

        <li class="last"><a href="#">Mauris at enim</a></li>

      </ul>

  </li>

</ul>

 

This is what I have so far but I can only add styles to the top level of
list items and there may be "N" number in the future. The function
should mark the first list items and last list items with a class of
"first" or "last" respectively. Then, based on the url, it should mark
the list item and the item's parents with a class of "active" if a child
anchor tag with a matching url is found. 

 

$.fn.styleList = function(id){

            $("ul")

        .find("li:last").addClass("last").end()

        .find("li:first").addClass("first").end()

                        .find("a").each(function(){ if(
location.href.indexOf(this.href) != -1)
{$(this).ancestors("li").addClass("active");}});

}

 

$(function(){

    $(document).styleList("nav");

});

 

Any help would be greatly appreciated.

Thanks.
Ryan Rose

 


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/