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>

现在我想用“subscriptionContainer”重新排列“subscription”div，这样class =“subscribed”的div应该移到底部，class =“btnGetit”的div应该全部上移。请用 Javascript 或 JQuery 给出解决方案。

Answer 1

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

演示：http: //jsbin.com/ebudux/2/edit

Answer 2

这是我最终解决的纯 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]);

Answer 3

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