advanced code snippet search

We Recommend

Wicked Cool PHP: Real-World Scripts That Solve Difficult Problems Wicked Cool PHP: Real-World Scripts That Solve Difficult Problems
Wicked Cool PHP contains a wide variety of scripts to process credit cards, check the validity of email addresses, template HTML, and serve dynamic images and text.

Posted By

cyberhobo on 08/17/09


Tagged

list wordpress style jquery last selector li first


Versions (?)


jQuery: select first and/or last list items

Published in: jQuery 

URL: http://docs.jquery.com/Selectors/firstChild

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.

Embed | Plain TextExpand 
  1. <!-- The sort of markup generated by wp_list_pages(), but common elsewhere. -->
  2. <ul class="menu">
  3. 	<li class="page_item">First Item</li>
  4. 	<li class="page_item">Second Item</li>
  5. 	<li class="page_item">Third Item</li>
  6. 	<li class="page_item">Last Item</li>
  7. </ul>
  8. <script type="text/javascript">
  9. jQuery( document ).ready( function ( $ ) {
  10. 	// Add first and last menu item classes
  11. 	$('ul.menu li:first-child').addClass( 'first_item' );
  12. 	$('ul.menu li:last-child').addClass( 'last_item' );
  13. });
  14. </script>

Report this snippet 

You need to login to post a comment.