How can I code a check to see if an element is first or last of a parent?
<p>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.</p>

<pre><code>&lt;ul id="menu"&gt;
   &lt;li&gt;&lt;a href="/City/0101004H"&gt;1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="/City/0101004I"&gt;2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="/City/0101004J"&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="/City/0101004K"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;a id="prev" href="#"&gt;&lt;img width="16" height="16" src="/images/prev.png"&gt;Prev&lt;/a&gt;
&lt;a id="next" href="#"&gt;&lt;img width="16" height="16" src="/images/next.png"&gt;Next&lt;/a&gt;
</code></pre>

<p>I had some help on stack overflow and came up with the following code:</p>

<p><a href="http://jsfiddle.net/MX94J/">fiddle</a></p>

<pre><code>$("#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())
});
</code></pre>

<p>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:</p>

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

<pre><code>&lt;a id="prev" href="#"&gt;&lt;img src="/images/noentry.png"&gt;&lt;/a&gt;
</code></pre>

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

<pre><code>&lt;a id="next" href="#"&gt;&lt;img src="/images/noentry.png"&gt;&lt;/a&gt;
</code></pre>

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