I'm having some trouble figuring this out. I have an unordered list menu that I want to style all the last elements with a folder icon and style all the expandable (parent) elements with a plus.gif image. I wanted to simply change the class by using .addclass() using jquery, which will contain the css to add the background-image. My jquery code below is only selecting the ":last-child", which is placing a folder icon on the last element in the list. i need to place a folder icon in front of all the "li's" that don't hav any children, and place a plus icon in front of all those that do have children. Is there a way to accomplish this?

Here's my HTML:

<ul id="nav">
 <li>Heading 1
  <ul>
   <li>Sub page A
    <ul>
     <li>Sub page A - 1
      <ul>
       <li>A - 1: 0</li>
       <li>A - 1: 1</li>
       <li>A - 1: 2</li>
      </ul>
     </li>
     <li>Sub page A - 3</li>
     <li>Sub page A - 2</li>
    </ul>
   </li>
   <li>Sub page B</li>
   <li>Sub page C
    <ul>
     <li>Sub page C - 1
      <ul>
       <li>C - 1: 0</li>
       <li>C - 1: 1</li>
       <li>C - 1: 2</li>
      </ul>
     </li>
     <li>Sub page C - 3</li>
     <li>Sub page C - 2</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>Heading 2
  <ul>
   <li>Sub page D</li>
   <li>Sub page E</li>
   <li>Sub page F</li>
  </ul>
 </li>
 <li>Heading 3
  <ul>
   <li>Sub page G</li>
   <li>Sub page H</li>
   <li>Sub page I</li>
  </ul>
 </li>
</ul>

Here's the jquery code:

    $(function(){

 //add class to last item in each list
 $('#nav li').find('li:last').addClass('menu_last_child');
});