Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: addClass 'last' to a series of list

    Hi,
    I have a menu like this and I want to add a class to each set of list as below, through jquery ideally.

    this is my jquery code,

    Code:
    $("#menu_side > ul > li:last").addClass("last");
    it only works in the last set of list... why is that? can I add the class to each set of list or it is just my html mark-ups incorrect?


    Code:
    <div id="menu_side" class="right">
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Comparative Areas</h2>
            <ul>
                <li><a href="#">GF 0: Visual Index  &laquo;</a></li>
                <li><a href="#">GF 1: Antarctica and Outsplay</a></li>
                <li><a href="#">GF 2: North West Atlantic & Pacific</a></li>
                <li class="last"><a href="#">GF 3: To the Tropics: North</a></li>
            </ul>
            
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> GF Tech (Ocean Earth)</h2>
            <ul>
                <li><a href="#">GF Tech 1: Water-Based Energy</a></li>
                <li><a href="#">GF Tech 2: Water Cycles Buildup</a></li>
                <li><a href="#">GF Tech 3: Return to Food Chain</a></li>
                <li class="last"><a href="#">GF Tech 4: Sediment Extraction</a></li>
            </ul>
            
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Controversies</h2>
            <ul>
                <li><a href="#">Global Warming</a></li>
                <li><a href="#">Nuclear Power</a></li>
                <li><a href="#">Science Errors</a></li>
                <li><a href="#">River Damage</a></li>
                <li><a href="#">Ecological Taxes</a></li>        
            </ul class="last">
            
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Applications</h2>
            <ul>
                <li><a href="#">Europe</a></li>
                <li><a href="#">Africa</a></li>
                <li><a href="#">East Asia </a></li>     
            </ul class="last">
            
            
            </div>
    Many thaks,
    Lau

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Your selector is saying "give me the last of all <li> tags that are direct children of all <ul> tags that are direct children of the element with ID #menu_side". It is not grouping the <li> tags under each <ul> tag as you were thinking.

    Try using :last-child instead of :last; that should give you what you're looking for.

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fumigator View Post
    Your selector is saying "give me the last of all <li> tags that are direct children of all <ul> tags that are direct children of the element with ID #menu_side". It is not grouping the <li> tags under each <ul> tag as you were thinking.

    Try using :last-child instead of :last; that should give you what you're looking for.
    yes it is the last-child I should be using. thanks!

    Code:
    $("#menu_side > ul > li:last").addClass("last");


  •  

    Posting Permissions

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