Ordering DIVs based on class name using Javascript/Jquery

Question

I have the following HTML structure:

<div id="container">
    <div>1</div>
    <div class="red">2</div>
    <div class="red">3</div>
    <div>4</div>
    <div>5</div>
    <div class="red">6</div>
    <div>7</div>
</div>

I wast to run some Jquery that will sort the divs inside the div container by ordering the divs first that have class="red", and then those that don't, so the final structure should be:

<div id="container">
    <div class="red">2</div>
    <div class="red">3</div>
    <div class="red">6</div>
    <div>1</div>
    <div>4</div>
    <div>5</div>
    <div>7</div>
</div>

Help? Thanks.

Bonus points if the re-ordering is done with with some sort of animation, to make it obvious to the user that the div order has changed. Thanks. — Callum
– Callum, Commented Jun 10, 2013 at 5:04
Can you please post the JavaScript/jQuery you've written so far? — Colin Brock
– Colin Brock, Commented Jun 10, 2013 at 5:05
Just curious. In the first place, why have you arranged them that way? — Þaw
– Þaw, Commented Jun 10, 2013 at 5:05
Bonus Points? same is for you, if you try soimething by yourself., before posting it — Rab Khan
– Rab Khan, Commented Jun 10, 2013 at 5:07

PSL · Accepted Answer · 2013-06-10 05:34:15Z

19

Try this:

 $(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className;
  }

Demo

With Some fadeIn/fadeout animation

var elem = $('#container').find('div').sort(sortByClass);

 function sortByClass(a, b) {
    return a.className < b.className;
 }

 var allElem = elem.get();
  (function append() {

    var $this = $(allElem.shift());

     $('#container').append(
                $this.fadeOut('slow'))
                         .find($this)
                             .fadeIn('slow', function () {
                                      if (allElem.length > 0) 
                                          window.setTimeout(append);
                            });
      })();

Demo

edited Jun 10, 2013 at 5:34

answered Jun 10, 2013 at 5:06

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maëlle Over a year ago

Hey this works great thanks! Is it possible to make it work with the second class name? Thanks

Rory McCrossan · Accepted Answer · 2017-11-27 10:44:51Z

5

Sorting is not required here. As the elements are already in the order you need, you can just call prependTo() on them, like this:

$('.red').prependTo('#container');

.red { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
    <div>1</div>
    <div class="red">2</div>
    <div class="red">3</div>
    <div>4</div>
    <div>5</div>
    <div class="red">6</div>
    <div>7</div>
</div>

answered Nov 27, 2017 at 10:44

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Fungie Over a year ago

Best answer. Works like a charm

Kylie · Accepted Answer · 2013-06-10 05:36:47Z

3

Add 2 buttons to your html

<button class="sort">SORT</button>
<button class="unsort">UNSORT</button>

Attach click handlers...

$('.sort').click(function(){
 var elem = $('#container').find('div').sort(doSort);
 $('#container').append(elem);
}

$('.unsort').click(function(){
 var elem = $('#container').find('div').sort(doUnsort);
 $('#container').append(elem);
}

Sorting functions

function doSort(a, b) {
 return a.className < b.className;
}

function doUnsort(a, b) {
   var a = $(a).text().toUpperCase();
   var b = $(b).text().toUpperCase();
   return (a < b) ? -1 : (a > b) ? 1 : 0;
}

JS FIDDLE DEMO

edited Jun 10, 2013 at 5:36

answered Jun 10, 2013 at 5:14

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:49Z

2

Following PSL's answer, I had to add ? 1 : -1 to the sortMe function like so:

$(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className ? -1 : 1; // This is the added code
  }

Thanks to Alex and Rejith who answered my similar question How to _prevent_ divs from appearing in random order

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 3, 2016 at 21:26

JDenman6

731 silver badge5 bronze badges

Collectives™ on Stack Overflow

Ordering DIVs based on class name using Javascript/Jquery

4 Answers 4

Demo

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related