How can I get the previous and next link hrefs from a list of hrefs?
<p>I have the following code that checks for click events on links inside of the 
element with id = menu:</p>

<pre><code>$("#menu")
   .on('click', 'a[href^="/City"]', function (event) {
      event.preventDefault();
      $('#editLink').attr("data-href", link);
   });
</code></pre>

<p>The HTML that this code works on looks like this:</p>

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

<p>I have two links on another part of my screen as below:</p>

<pre><code>&lt;a id="prev" href="#"&gt;Prev&lt;/a&gt;
&lt;a id="next" href="#"&gt;Next&lt;/a&gt;
</code></pre>

<p>How can I make it so that if a user clicks on the "2" link then these links are changed to:</p>

<pre><code>&lt;a id="prev"  href="/City/0101004H" title="City 1"&gt;Prev&lt;/a&gt;
&lt;a id="next"  href="/City/0101004J" title="City 3"&gt;Next&lt;/a&gt;
</code></pre>

<p>If a user clicks on the "1" that the links are changed to:</p>

<pre><code>&lt;a id="prev"  href="#"&gt;&lt;/a&gt;
&lt;a id="next"  href="/City/0101004J" title="City 2"&gt;Next&lt;/a&gt;
</code></pre>

<p>If a user clicks on the last element in the list then the links are changed to:</p>

<pre><code>&lt;a id="prev"  href="/City/0101004H" title="City 3"&gt;Prev&lt;/a&gt;
&lt;a id="next"  href="#"&gt;&lt;/a&gt;
</code></pre>

<p>For me the biggest problems is how to check if there are links before or after the current link. I know basic jQuery but I hope someone can help me with some suggestions.</p>
