How to sort divs based on a value of a class inside of that div

Question

My html is this:

<div class="comment_div">
      <span class="upvotes">4</span>
</div>

<div class="comment_div">
      <span class="upvotes">7</span>
</div>

<div class="comment_div">
      <span class="upvotes">2</span>
</div>

The value of .upvotes is dynamic so I want js/jquery to sort the divs based on the value at that time. How would I do this?

If they are all the same, as you show them in your question, then just sort the data before populating the div's. — rasmeister
– rasmeister, Commented Feb 21, 2017 at 0:14
Just a reminder that Stack Overflow is not a free coding service. You're supposed to do research, attempt a solution, then ask for help with it. — user5734311
– user5734311, Commented Feb 21, 2017 at 0:30

John S · Accepted Answer · 2017-02-21 00:36:34Z

You can do the following:

Select all the divs into a JQuery object.
Call .get() on the JQuery object to get an array of the divs.
Use the Array.prototype.sort() function to sort the divs in the array.
Create another JQuery object by passing the array of divs to $().

Code:

var divs = $('.comment_div').get();
divs.sort(function(div1, div2) {
    function getValue(div) { return parseInt($(div).children('span:first').text(), 10); }
    var val1 = getValue(div1), val2 = getValue(div2);
    return (val1 > val2) ? 1 : ((val1 < val2) ? -1 : 0);
});
var $sortedDivs = $(divs);

jsfiddle

Notes:

JQuery has a .sort() function, but it is not documented, so it is probably best not to use it.
I assume the values are numbers and should be sorted as such, so you need to convert them to numbers or else you will be sorting them as strings.

Thanks this works aswell. There are some other things not working so I will come back and ask.

bvrakvs · Accepted Answer · 2017-02-21 00:44:49Z

1

Can you try the following code?

divArr = $(".comment_div")
divArr.sort(function(a, b) {
        return $(a).find("span").text() > $(b).find("span").text() ? 1: -1;
    })
$("body").append(divArr)

Assuming your html is in the following format;

<body>
      <div class="comment_div">
            <span class="upvotes">4</span>
      </div>

      <div class="comment_div">
            <span class="upvotes">7</span>
      </div>

      <div class="comment_div">
            <span class="upvotes">2</span>
      </div>
</body>

And if your html is dynamic, you can rerun the code snippet again & again to resort the divs with new values.

jsFiddle link detailing above answer ; https://jsfiddle.net/1gn7no8s/

edited Feb 21, 2017 at 0:44

answered Feb 21, 2017 at 0:14

bvrakvs

14.7k4 gold badges55 silver badges96 bronze badges

6 Comments

Zorgan Over a year ago

Has no efffect.

bvrakvs Over a year ago

@Zorgan Ah, you'd like to sort the html? I thought you would want to get the references to the divs only.

Zorgan Over a year ago

Yes I'd like for the whole divs to be sorted and moved accordingly.

Zorgan Over a year ago

Thanks it works but it also removes all event handlers associated with my divs. Any idea why this would happen?

bvrakvs Over a year ago

@Zorgan can you try again? I modified the code where I update the wrapping tag object.

|

Collectives™ on Stack Overflow

How to sort divs based on a value of a class inside of that div

2 Answers 2

1 Comment

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Related