CODEWITHSUNDEEP
javascriptjqueryhtml
user2301765
user2301765

Reputation: 729

Jquery sorting div (descending order) based on attribute value

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>

Upvotes: 1

Views: 3072

Answers (3)

Master Yoda
Master Yoda

Reputation: 4412

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>

Upvotes: 0

Niklesh Raut
Niklesh Raut

Reputation: 34914

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>

Upvotes: 5

Ravi Chauhan
Ravi Chauhan

Reputation: 1458

   $('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;
   })

Upvotes: 0

Related Questions