Sorting a div based on data attribute in jQuery

Question

Alright, I'm trying to make it so jQuery sorts the divs when a button is clicked,

Let's say the list looks like this,

<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

Then after the button is clicked I want it to spit out,

   <div class="wrapper">
      <div class="item" data-worth="720">Edgy</div>
      <div class="item" data-worth="666">Meme</div>
      <div class="item" data-worth="420">Blaze</div>
    </div>

Basically sorting worth from low to high, rearanging everything and putting it back in the wrapper.

I'm honestly clueless on how I'd go on doing this, I thought of using jQuery's .each function but then I'd only be able to get highest value on the top, any suggestions?

Possible duplicate of stackoverflow.com/questions/6133723/… — JGV
– JGV, Commented Aug 28, 2017 at 21:59
@VimalanJayaGanesh yeah just stumbled upon the thread but can't seem to find the right anwser. — Martijn Ebbens
– Martijn Ebbens, Commented Aug 28, 2017 at 21:59
Possible duplicate of Sort Divs in Jquery Based on Attribute 'data-sort'? — Leo Van Deuren
– Leo Van Deuren, Commented Aug 28, 2017 at 22:04
What do you mean "can't find the right answer"? The selected answer does work, and should work for you too. Have you tried it, and it's not working for you in some way? — Daniel
– Daniel, Commented Aug 28, 2017 at 22:07

Rick Hitchcock · Accepted Answer · 2017-08-28 22:09:19Z

9

Sort the wrapper's divs based on their data('worth'), then append the sorted list back to the wrapper:

$('button').click(function() {
  $('.wrapper div').sort(function(a, b) {
    return $(b).data('worth') - $(a).data('worth');
  }).appendTo('.wrapper');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Sort</button>
<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

answered Aug 28, 2017 at 22:09

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

Comments

JGV · Accepted Answer · 2017-08-28 22:13:39Z

//code taken from: https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort

//All I have done is, presented the code such a way that it is easy for you to understand and use it in your application

function asc_sort(a, b){ return ($(b).data("worth")) > ($(a).data("worth")) ? 1 : -1; }

jQuery.fn.sortDivs = function sortDivs() {
    $(".item", this[0]).sort(asc_sort).appendTo(this[0]);
}

$('#BtnSort').on('click', function(){
    $(".wrapper").sortDivs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="BtnSort">Sort</button>
<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

rollingthedice · Accepted Answer · 2017-08-28 22:17:35Z

0

HTML:

<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>
<button class="clickMe">Sort</button>

JavaScript:

function someFunction(){
  var $wrapper = $('.wrapper');
    $wrapper.find('.item').sort(function (a, b) {
    return +b.dataset.worth - a.dataset.worth;
})
.appendTo( $wrapper );
}
$('body').on('click', '.clickMe', someFunction);

Here is a working: JSFiddle

answered Aug 28, 2017 at 22:17

rollingthedice

1,1258 silver badges17 bronze badges

Collectives™ on Stack Overflow

Sorting a div based on data attribute in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related