SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code JavaScript:
    $("#menu_side > ul > li:last-child").addClass("last");
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Try this:

    Code JavaScript:
    $("#menu_side > ul > li:last-child").addClass("last");
    it works perfectly! thank u


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
  •