Monday, July 14, 2008

Adding link separators to a unordered list using jQuery

I figured out how to easily add a separator to a inline displayed unordered list of links using jQuery and so I'd thought I share.

So for a list like so:

<ul class="subnavigation">
    <li><a href="http://damnralph.com">Damn Ralph</a></li>
    <li><a href="http://jquery.com">jQuery</a></li>
    <li><a href="http://brandensemble.com">BrandEnsemble</a></li>
</ul>

I wanted it to display like this:

Damn Ralph | jQuery | BrandEnsemble

Notice that the separator (|) is only between the links and not at either the beginning or end.  I should also note that when I was rendering the list it was coming from a dynamic source so I didn't have a set list to work from.

I wrote this jQuery:

$(document).ready(function(){
   $(".subnavigation li:lt(" + ($(".subnavigation li").length - 1) + ")").append(" | ");
});

So basically I used the :lt(index) selector to match against all the matches that were less then the index value.  I do that by figuring out the length of how many are selected and subtracting one.  Then finally I append my selector to all of my matches.


Update: John Resig (creator of jQuery) chimes in with an easier way to do the same thing in the comments.

$(document).ready(function(){
   $(".subnavigation li:not(:last-child)").append(" | ");
});

This works by selecting all the li's except the last child (or the last li) in the container. This will work with multiple containers on a page if there are more then one.  Thanks John for the tip.

# Monday, July 14 2008 at 11:24 PM | Comments [4]
Tags:  |  | 
Monday, July 14, 2008 11:56:27 PM (Eastern Daylight Time, UTC-04:00)
Got something that's a little bit easier!

$(".subnavigation li:not(:last-child)").append(" | ");

This finds all the li elements that aren't the last child within their container - so this would even work for multiple containers as well (if they existed on the page). Hope this helps!
John Resig
Tuesday, July 15, 2008 12:05:08 AM (Eastern Daylight Time, UTC-04:00)
@John - Awesome, yeah your solution is way simpler.
Ralph Whitbeck
Tuesday, July 15, 2008 10:16:21 AM (Eastern Daylight Time, UTC-04:00)
Knowing how to do this as a jQuery developer is certainly mandatory, but might I point out that using the right technology for the situation is always preferable. In this case, wouldn't it be much more appropriate to do this via CSS without using Javascript at all?

ul.subnavigation li { border-right: 1px solid #000; }
ul.subnavigation li:last { border-right: none; }
anon E mouse
Tuesday, July 15, 2008 10:29:32 AM (Eastern Daylight Time, UTC-04:00)
@anon - you don't know how right you are. A couple of developers and I just finished a water cooler discussion/debate about using javascript/jquery for presentation here at work. I am in your camp with using the right technology.

The correct way, I was debating was to extend the ASP.NET control I was using for pulling the navigation onto the page. Unfortunately, it would require more time to program it then to perform the jQuery hack I used. The project I used this on has a ridiculous deadline so saving time now is key.

I like your solution but two things pop out at me and the last one is the reason I didn't use it.

1. I think the syntax is :last-child http://www.w3.org/TR/css3-selectors/#last-child-pseudo
2. Also :last-child is CSS3 and thus not supported in the older browsers we need to support (IE 6 :( ) CSS2.1 doesn't support any selectors that'll select the last item.
Ralph Whitbeck
Name
E-mail
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u)  

Enter the code shown (prevents robots):

Blog Posts by:

Currently Viewable:

My Twitter Updates

View Twitter Page