Swapping list elements with jQuery
<p>I have a list:</p>

<pre><code>&lt;li&gt;item one&lt;img src="/assets/img/site/up_arrow.png" class="upArrow"/&gt;&lt;img src="/assets/img/site/down_arrow.png" class="downArrow"/&lt;/li&gt;
&lt;li&gt;item two&lt;img src="/assets/img/site/up_arrow.png" class="upArrow"/&gt;&lt;img src="/assets/img/site/down_arrow.png" class="downArrow"/&lt;/li&gt;
&lt;li&gt;item three&lt;img src="/assets/img/site/up_arrow.png" class="upArrow"/&gt;&lt;img src="/assets/img/site/down_arrow.png" class="downArrow"/&lt;/li&gt;
&lt;li&gt;item four&lt;img src="/assets/img/site/up_arrow.png" class="upArrow"/&gt;&lt;img src="/assets/img/site/down_arrow.png" class="downArrow"/&lt;/li&gt;
&lt;li&gt;item five&lt;img src="/assets/img/site/up_arrow.png" class="upArrow"/&gt;&lt;img src="/assets/img/site/down_arrow.png" class="downArrow"/&lt;/li&gt;
</code></pre>

<p>Each one has an up and down arrow on. In my jquery I have:</p>

<pre><code>$(".upArrow").click(function() {

});

$(".downArrow").click(function() {

});
</code></pre>

<p>How can I get it so that when a user clicks up arrow it swaps the li with the one above, and when they click down it swaps with the li below (if one exists).</p>

<p>Thanks</p>
