CODEWITHSUNDEEP
javascriptjquery
Huzaifa Qamer
Huzaifa Qamer

Reputation: 314

How to reorder divs based on class names using Javascript

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.

Upvotes: 2

Views: 1605

Answers (3)

suman bharti
suman bharti

Reputation: 1

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

Upvotes: 0

Huzaifa Qamer
Huzaifa Qamer

Reputation: 314

Here is a pure JavaScript implementation that I finally worked out

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]);

Upvotes: 0

elclanrs
elclanrs

Reputation: 94141

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

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

Upvotes: 7

Related Questions