Question

Here is my 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>

Now I want to rearrange the “subscription” divs withing the “subscriptionContainer” such that the divs that have class = “subscribed” should be moved to bottom and the divs having class = “btnGetit” should all be moved up. Please give solutions in Javascript or JQuery.

Answer 1

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

Demo: http://jsbin.com/ebudux/2/edit