Sorting after data-attribute

Question

I am working on a list of divs that contain custom data-attributes that I want to sort with a selection. If selected for example 'followers' it will be sorted after the .box's data-followers.

My jsfiddle: https://jsfiddle.net/nbgo117b/

I was thinking something like this, but I can't make it work.

 $("#sorter").change(function() {
    var value = $("#sorter option:selected").val();
    var boxOrdered;

    if (value == 'date' ){
        boxOrdered = $('.influencer .box').sort(function(a, b){
        return ($(b).data('followers')) < ($(a).data('followers')) ? 1 : -1;
    });
  }
$(".influencer").html(boxOrdered);
});

Roberto Bisello · Accepted Answer · 2018-01-31 13:16:18Z

1

you can use $.sort to compare the data attribute just like this:

$(document).ready(function() {
     	var $influencer = $('.influencer');
       $("#sorter").on('change',function() {
         var criterion = $(this).val();
         $influencer.find('.box').sort(function (a, b) {
           var valA = $(a).find('[data-'+criterion+']').data(criterion);
           var valB = $(b).find('[data-'+criterion+']').data(criterion);
           return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
         }).appendTo($influencer);
       });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<selection id="sort">
<select id="sorter">
<option value="default">Sort by</option>
<option value="followers">Most followers</option>
<option value="likes">Most likes</option>
<option value="views">Most views</option>
<option value="date">Newsest</option>
<option value="alpha">Alphabetical order</option>
</select>
</selection>   

 <div class="influencer">
    <div class="box" data-added="20.20.2018">
      <span class="followers" data-followers="1500000">1.5M followers</span>
      <span class="likes" data-likes="200000">200K likes</span>
      <span class="views" data-views="100000">100K video views</span>
    </div>
    <div class="box" data-added="20.20.2018">
      <span class="followers" data-followers="2500000">2.5M followers</span>
      <span class="likes" data-likes="80000">80K likes</span>
      <span class="views" data-views="200000">200K video views</span>
    </div>
</div>

edited Jan 31, 2018 at 13:16

answered Jan 31, 2018 at 13:11

Roberto Bisello

1,22511 silver badges18 bronze badges

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

5 Comments

vemund Over a year ago

Thanks! Updated my JsFiddle, but doesn't seem to work. jsfiddle.net/nbgo117b/2

Roberto Bisello Over a year ago

you missed jquery in you fiddle, I've edited my answer adding html and jquery, so it can be run inside stackoverflow ;) And I've reverted the sort order so, the div with higher results will be up :)

vemund Over a year ago

Ops! My bad haha. Thank you very much. Works well. Do you know how I can also make it so it works for the data-added and sort after newest date?

Roberto Bisello Over a year ago

replace the selection of value with something like var valA = (criterion === 'date' ? $(a) : $(a).find('[data-'+criterion+']')).data(criterion); and the same for valB, obviously. In this way if you are looking for date it will pick the data attribute from the element itself, otherwise it will search for something with [data-xxx] inside the element :)

Roberto Bisello Over a year ago

P.s. this method will work if you use a timestamp or a date similar to YYYYMMDD, otherwise you also have to parse the date so that you can compare it ;)

Collectives™ on Stack Overflow

Sorting after data-attribute

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related