title: Re-arranging / -sorting DIVs without re-inserting into DOM
body: <p>I have several DIVs with content that have a data-weight-attribute which is updated regularly via AJAX.</p>
  
  <p>I sort them in the loop where I iterate over the new values coming from the ajax-request.</p>
  
  <p>Because the data-weight can be updated any time to any value, the order can change totally from update to update.</p>
  
  <p>My sorting-logic seems flawed (to say the least ;)) because it only compares every element to its next via <code>.next()</code> so you have to click "Sort by data-weight" max. 4 times for 4 elements until they are sorted (see fiddle below)</p>
  
  <p>It is important to know that the DIVs to be sorted contain external ressources like images, videos etc so it's important they are moved around and not re-created, because I think when re-inserted into the DOM, the contained ressources get re-loaded which is unacceptable for my use-case.</p>
  
  <p>As it's hard to descripte and maybe understand, here is my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/PdGTK/5/" rel="noreferrer">http://jsfiddle.net/PdGTK/5/</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>While the main problem is solved, there is still the problem that when f.e. Youtube-Videos are included, they are re-loaded every time the DIVs are reordered, even if the video doesn't change place in the DOM. That a) looks weird and b) interrupts the video-play.
  Reading more about the topic, moving iframes in the DOM always seems to make them reload their content - how stupid is that?</p>
  
  <p>Fiddle is updated with a fixed data-weight of 1 for the YT-video so it always stays on top.</p>
  
  <p><a href="http://jsfiddle.net/PdGTK/10/" rel="noreferrer">http://jsfiddle.net/PdGTK/10/</a></p>
  
  <p>Ideas very welcome!!</p>