Jquery sorting div (descending order) based on attribute value

Question

I have a ajax function which actually pull this message_count data from server every 3 mins and update the attribute of each player accordingly... now i want to get the divs automatically gets sorted after this ajax call based on message_count attribute value in descending order... so the player who got more messages will come as first div.

var sortedDivs = jQuery(".players").find(".player").toArray().reverse(sorter);
jQuery.each(sortedDivs, function(index, value) {
  jQuery(".players").append(value);
});

function sorter(a, b) {
  return a.getAttribute('message_count') - b.getAttribute('message_count');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="players">
  <div class="player" message_count="8">8</div>
  <div class="player" message_count="2">2</div>
  <div class="player" message_count="0">0</div>
  <div class="player" message_count="1">1</div>
</div>

Use sort instead of reverse i.e. jQuery(".players").find(".player").sort(sorter).appendTo(".players"); function sorter(a, b) { return b.getAttribute('message_count') - a.getAttribute('message_count'); }; — Satpal
– Satpal, Commented Oct 23, 2017 at 12:01

Niklesh Raut · Accepted Answer · 2017-10-23 12:13:58Z

5

Using jquery .sort will do it easily

var players = $(".players div");
var temp = players.sort(function(a,b){
  return parseInt($(b).attr("message_count")) - parseInt($(a).attr("message_count"));
});
$(".players").html(temp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="players">
  <div class="player" message_count="8">Div 8</div>
  <div class="player" message_count="2">Div 2</div>
  <div class="player" message_count="0">Div 0</div>
  <div class="player" message_count="1">Div 1</div>
 </div>

answered Oct 23, 2017 at 12:13

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

2 Comments

user1063287 Over a year ago

would this work for sorting by values that are iso date strings? eg new Date().toISOString() // 2018-09-22T05:51:53.731Z

Niklesh Raut Over a year ago

can you add your question and share the link here ?

Ravi Chauhan · Accepted Answer · 2017-10-23 11:49:12Z

0

   $('div').sort(function (a, b) {

      var contentA =parseInt( $(a).attr('message_count'));
      var contentB =parseInt( $(b).attr('message_count'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
   })

answered Oct 23, 2017 at 11:49

Ravi Chauhan

1,53513 silver badges30 bronze badges

3 Comments

charlietfl Over a year ago

numeric sort is simpler just doing valueA-valueB the same way OP is doing

Nigel Ren Over a year ago

Code only answers might solve the issue, but some explanation of how it solves the problem would help in learning to understand how to solve future problems.

Ashish Patel Over a year ago

What if we wanted to sort strings

Master Yoda · Accepted Answer · 2017-10-23 12:20:48Z

0

You can use the javascript sort() method and just reverse the query.

.sort(function(a, b){return b.getAttribute('message_count') - a.getAttribute('message_count'))

var sortedDivs = jQuery(".players").find(".player").toArray().sort(function(a, b){return parseInt(b.getAttribute('message_count')) - parseInt(a.getAttribute('message_count'))});

jQuery.each(sortedDivs, function(index, value) {
  jQuery(".players").append(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="players">
  <div class="player" message_count="8">8</div>
  <div class="player" message_count="2">2</div>
  <div class="player" message_count="0">0</div>
  <div class="player" message_count="1">1</div>
</div>

edited Oct 23, 2017 at 12:20

answered Oct 23, 2017 at 12:15

Master Yoda

4,42212 gold badges46 silver badges81 bronze badges

Collectives™ on Stack Overflow

Jquery sorting div (descending order) based on attribute value

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related