How can I code a check to see if an element is first or last of a parent?

Question

I have the following menu which can have anything up to about 50 items and two links that a user can use to navigate to the previous or next city. Here for this example I am just showing four address links.

<ul id="menu">
   <li><a href="/City/0101004H">1</a></li>
   <li><a href="/City/0101004I">2</a></li>
   <li><a href="/City/0101004J">3</a></li>
   <li><a href="/City/0101004K">4</a></li>
</ul>

<a id="prev" href="#"><img width="16" height="16" src="/images/prev.png">Prev</a>
<a id="next" href="#"><img width="16" height="16" src="/images/next.png">Next</a>

I had some help on stack overflow and came up with the following code:

fiddle

$("#menu").on('click', 'a[href^="/City"]', function(event) {
   event.preventDefault();
      var prev = $(this).parent().prev().find('a');
      var next = $(this).parent().next().find('a');
      $('#prev').prop('href', jQuery(prev).prop('href')).prop('title', 'City ' + jQuery(prev).text());
      $('#next').prop('href', jQuery(next).prop('href')).prop('title', 'City ' + jQuery(next).text())
});

This sets the href of the previous and next to the appropriate value when I click on on one of the menu items. It works but not for the first and last items in the list. What I need is this:

a) When the first item is clicked on I would like the #prev to change to:

<a id="prev" href="#"><img src="/images/noentry.png"></a>

b) When the last item is clicked on I would like the #next to change to:

<a id="next" href="#"><img src="/images/noentry.png"></a>

Is there an easy way I could do this without adding too much additional code?

Answer 1

You can test if the element is the first child, or the last child using the following:

$(this).parent().is(":first-child");
$(this).parent().is(":last-child");

If this referenced the a being clicked, we would test whether it was the first link, or the last link in the list by testing whether or not its parent was a first child, or a last child, or neither.

Additionally, you could base attribute-object-construction off of these values:

$("#menu").on('click', 'a', function(event) {

   // Prevent link from taking us anywhere
   event.preventDefault();

   // We'll be referencing the parent numerous times
   var parent = $(this).parent();

   // Determine the new properties of the PREV link
   var prev = parent.is(":first-child") 
       ? { html: '<img src="/images/noentry.png" />', 
           title: null } 
       : { html: '<img src="/images/prev.png" /> Prev', 
           title: 'City ' + parent.prev().text() } ;

   // Determine the new properties of the NEXT link
   var next = parent.is(":last-child") 
       ? { html: '<img src="/images/noentry.png" />', 
           title: null } 
       : { html: '<img src="/images/next.png" /> Next', 
           title: 'City ' + parent.next().text() } ;

    // Set new attribtes of both PREV and NEXT
    $("#prev").attr( prev );
    $("#next").attr( next );

});​

You could further construct the attributes for the #prev and #next elements to your needs.

Demo: http://jsfiddle.net/MX94J/1/