Solved

Use jQuery to add class to last link in a list

Posted on 2009-07-08
5
426 Views
Last Modified: 2012-05-07
Hi all,

Say I have a linked list as such:

<div id="some-list">
<ul>
<li>aaaaa</li>
<li>bbbbb</li>
<li>cccccc</li>
</ul>
</div>

How can I use jQuery to add a class to the last item in the list so it becomes:

<div id="some-list">
<ul>
<li>aaaaa</li>
<li>bbbbb</li>
<li class="some-class">cccccc</li>
</ul>
</div>

Thank you.

GW.
0
Comment
Question by:GhostWerx
  • 2
  • 2
5 Comments
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24801969
Use the :last filter
$("#some-list li:last")

Open in new window

0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 50 total points
ID: 24801977
This should do it:
$('#some-list li:last').addClass('some-class');

Open in new window

0
 

Author Comment

by:GhostWerx
ID: 24802060
Hi Guys,

Thanks for the help so far.

Now to make this a little more complicated!!

I have some lists embedded within each other as such

<div id="some-list">
<ul>
<li>aaaaa
   <ul>
   <li>11111</li>
   <li>22222</li>
   </ul>
</li>
<li>bbbbb</li>
<li>cccccc
   <ul>
   <li>33333</li>
   <li>44444</li>
   </ul>
</li>
</ul>
</div>

And I used the following jQuery to add a class to the last link of an embedded list:

$('#some-list ul li ul li:last').addClass('some-class');

The jQuery only added the some-class the the last link of the last embedded list.

How can I get it to add the some-class to the last link of every embedded list???

Thanks for your help so far.

GW.
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 450 total points
ID: 24802114
Loop through each unnumbered list find the last list item and add the class
$("#some-list ul").each(function() {
	$(this).children("li:last").addClass("some-class");
});

Open in new window

0
 

Author Closing Comment

by:GhostWerx
ID: 31601015
Thanks guys.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question