Advanced Search

Return to Snippet

Revision: 16836
at August 17, 2009 17:38 by cyberhobo
Updated Code 
<!-- The sort of markup generated by wp_list_pages(), but common elsewhere. -->
<ul class="menu">
	<li class="page_item">First Item</li>
	<li class="page_item">Second Item</li>
	<li class="page_item">Third Item</li>
	<li class="page_item">Last Item</li>
</ul>
<script type="text/javascript">
jQuery( document ).ready( function ( $ ) {
	// Add first and last menu item classes
	$('ul.menu li:first-child').addClass( 'first_item' );
	$('ul.menu li:last-child').addClass( 'last_item' );
});
</script>

Revision: 16835
at August 17, 2009 17:36 by cyberhobo
Updated Code 
<ul class="menu">
	<li class="page_item">First Item</li>

jQuery( document ).ready( function ( $ ) {
	// Add first and last menu item classes
	$('ul.menu li:first-child').addClass( 'first_item' );
	$('ul.menu li:last-child').addClass( 'last_item' );
});

Revision: 16834
at August 17, 2009 17:14 by cyberhobo
Initial Code 
jQuery( document ).ready( function ( $ ) {
	// Add first and last menu item classes
	$('ul.menu li:first-child').addClass( 'first_item' );
	$('ul.menu li:last-child').addClass( 'last_item' );
});
Initial URL 
http://docs.jquery.com/Selectors/firstChild
Initial Description 
Select the first and last item in an unordered list. As an example, I add a CSS class to each.

In WordPress, it's not so easy to get wp\_list\_pages() to generate these classes. jQuery provides an easy out for javascript-enabled clients.
Initial Title 
jQuery: select first and/or last list items
Initial Tags 
list, wordpress, style, jquery
Initial Language 
jQuery