javascript - Javascriptを使用してクラス名に基づいてdivを並べ替える方法

Question

ここに私のHTMLがあります

<div id="subscriptionContainer">

<div class="subscription">
  <div class="subs-btn">
        <div class="subscribed">Subscribed</div>
  </div>
</div>


<div class="subscription">
  <div class="subs-btn">
        <div class="btnGetit">Get It</div>
  </div>
</div>

<div class="subscription">
  <div class="subs-btn">
        <div class="subscribed">Subscribed</div>
  </div>
</div>


<div class="subscription">
  <div class="subs-btn">
        <div class="btnGetit">Get It</div>
  </div>
</div>

<div class="subscription">
  <div class="subs-btn">
        <div class="subscribed">Subscribed</div>
  </div>
</div>


<div class="subscription">
  <div class="subs-btn">
        <div class="btnGetit">Get It</div>
  </div>
</div>

</div>

ここで、class = "subscribed" を持つ div を下に移動し、class = "btnGetit" を持つ div をすべて上に移動するように、「subscriptionContainer」内の「サブスクリプション」div を再配置したいと考えています。JavascriptまたはJQueryで解決策を教えてください。

Answer 1

var $wrap = $('#subscriptionContainer');
$wrap.find('.subscribed').parents('.subscription').appendTo( $wrap );

デモ: http://jsbin.com/ebudux/2/edit

Answer 2

var $wrap = $('#subscriptionContainer');
$wrap.find('.subscription').children('.subscribed').appendTo( $wrap );

Answer 3

これが私が最終的に解決した純粋なJavaScriptの実装です

var container = document.getElementById('subscriptionContainer');
var allDivs = container.getElementsByTagName('div');
var subsProds = new Array();
var count = 0;

for (i = 0; i < allDivs.length; i++)
{
    var currentElement = allDivs[i];
    if (currentElement.className == 'subscribed') {
        subsProds[count] = currentElement.parentNode.parentNode;
        container.removeChild(currentElement.parentNode.parentNode);
        count++;
    }
}
for (i = 0; i < subsProds.length; i++)
    container.appendChild(subsProds[i]);