advanced code snippet search

Posted By

cyberhobo on 08/17/09


Tagged

list wordpress style jquery last selector li first


Versions (?)


Advertising

Website Promotion DIRECTORY is a crucial factor for all websites that need to gain better organic search engine rankings and increase website traffic.
Submitting your website as part of your Web Promotion strategy to our SEO friendly and high traffic Business Directory for review is an excellent way to gain a valuable backlink and increase your websites visibility online.

Submit Site


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.

Expand | Embed | Plain Text 
  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.