Question

trying to select the last LI in this list and add a class to it – can’t seem to make it work?? Any ideas what I have wrong here?

Baiscally want to add the class “noBottomBorder” to the last LI in the subnav list – e.g. in this example “Commercial” but can’t hard code as subnav list is dynamic CMS controlled…

jQuery:

<script type="text/javascript">
$("ul.subNavWrapper li:last-child").addClass("noBottomBorder");
</script>

HTML:

<div class="navWrapper">
<ul>
<li><a href="#.html" target="_self" title="Navigate to the Home page" class="navButton primaryLink01">Home</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Our Approach page" class="navButton primaryLink02">Our Approach</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Process page" class="navButton primaryLink03">The Process</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Examples of Work page" class="navButton primaryLink04">Examples of Work</a>

<ul class="subNavWrapper">
<li><a href="#.html" target="_self" title="Navigate to the The Extenstions page" class="subNavButton">Extenstions</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Refurbishments page" class="subNavButton">Refurbishments</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Kitchens page" class="subNavButton">Kitchens</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Bathrooms page" class="subNavButton">Bathrooms</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Bespoke Carpentry page" class="subNavButton">Bespoke Carpentry</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The General page" class="subNavButton">General</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Commercial page" class="subNavButton">Commercial</a></li>
</ul>

</li>
<li><a href="#.html" target="_self" title="Navigate to the Press page" class="navButton primaryLink05">Press</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Testimonials page" class="navButton primaryLink06">Testimonials</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Fees page" class="navButton primaryLink07">Fees</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Contact page" class="navButton primaryLink08">Contact</a></li>
</ul>
</div>

Answer 1

updated answer: http://jsfiddle.net/YQdL9/

just give the .subNavWrapper class to ul.

$(function(){ 
    $("ul.subNavWrapper li:last-child").addClass("noBottomBorder");
});