jquery: addClass 'last' to a series of list

[lauthiamkok]

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,

$("#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?

<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

[Fumigator]

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.

[lauthiamkok]

Originally Posted by Fumigator

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!

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