...

View Full Version : jquery: addClass 'last' to a series of list



lauthiamkok
11-17-2009, 05:25 AM
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
11-17-2009, 10:51 PM
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
11-17-2009, 11:43 PM
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! :D


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum