SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using jquery to change the appeance of nested lists

    Hi Guys,
    I'm just getting into jquery and going through my new book and I'm trying to do a zebra strip effect on some unordered lists. I know this is commonly used on tables, and the book has explained how.

    The way I'm thinking is that I want all li's that have a class of .sub-level should be zebra striped between the odd and even css that I've got.

    The problem is just in the jquery, but I'll attach everything so you can see, just incase it makes a difference.

    Here's the code, perhaps someone can point out where I'm going wrong:

    html:
    Code:
    <ul id="selected-plays" class="clearfix">
      <li>Comedies
        <ul>
        	<li>As You Like It</li>
        	<li>All's Well That Ends Well</li>
        	<li>A Midsummer Night's Dream</li>
        	<li>Twelfth Night</li>
        </ul>
      </li>
      <li>Tragedies
        <ul>
        	<li>Hamlet</li>
        	<li>Macbeth</li>
        	<li>Romeo and Juliet</li>
        </ul>
      </li>
      <li>Histories
        <ul>
        	<li>Henry IV (email)
        	
        	<li>Henry V</li>
    		<li>Richard II</li>
        </ul>
      </li>
    </ul>
    CSS:
    Code:
    .horizontal {
    	float:left;
    	display:inline;
    }
    
    .sub-level{
    	color:#FF0000;
    }
    
    .odd {
    	background-color:#66FF66;
    }
    
    .even {
    	background-color:#FFFF66;
    }

    Jquery:
    Code:
    $(document).ready(function() {
      $('#selected-plays > li').addClass('horizontal');
      $('#selected-plays li:not(.horizontal)').addClass('sub-level');
      $('.sub-level li:odd').addClass('odd');
      $('.sub-level li:even').addClass('even');
    });
    I'm fairly sure that the problem is that I'm trying to give a list item multiple classes, and as far as I know, that's not possible. However I can't think of a way around it.
    I've tried things like:
    $('#selected-plays > ul > li > ul li:not(.horizontal)').addClass('odd');

    but that didn't work out.

    Can someone explain how to use jquery parent child relationships in-depth please?

    Thanks
    Last edited by stevex33; Jul 15, 2008 at 07:59.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •