title: Swap two elements in jQuery
body: <p>I'm trying to swap two elements using up and down arrows.</p>
  
  <p>A JSFiddle solution would be great!</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;div class="content"&gt;Some text&lt;/div&gt;
      &lt;div class="move"&gt;
          &lt;div class="move-down"&gt;down&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
      &lt;div class="content"&gt;Some other text&lt;/div&gt;
      &lt;div class="move"&gt;
          &lt;div class="move-up"&gt;up&lt;/div&gt;
          &lt;div class="move-down"&gt;down&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
      &lt;div class="content"&gt;Some text&lt;/div&gt;
      &lt;div class="move"&gt;
          &lt;div class="move-up"&gt;up&lt;/div&gt;
          &lt;div class="move-down"&gt;down&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
      &lt;div class="content"&gt;Some other text&lt;/div&gt;
      &lt;div class="move"&gt;
          &lt;div class="move-up"&gt;up&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My last try was:</p>
  
  <pre><code>// el is the clicked one.
  jQuery('.move').children().click(function(el) {
      if (jQuery(el).hasClass('move-down') === true) {
          el = jQuery(el).parent().parent();
          el.prependTo(el.after(el));
      } else {
          el = jQuery(el).parent().parent();
          el.appendTo(el.before(el));
      }
  });
  </code></pre>
  
  <p>I've tried a lot of different ways to change items. I've tried with <code>replaceWith()</code>, <code>before()</code>, and <code>after()</code> but nothing worked.</p>
  
  <p>NOTICE:
  I've already written a function which displays the correct up / down DIVs. So the first and last one can only moved in one direction. That's already solved. I also can't use any kind of existing jQuery plugins.</p>