Sort element by two data attributes using jquery sort

Question

I have an li element with 2 data attributes, basically I want to sort out first the data-arrange attribute, this is the element

 <ul>
        <li data-arrange="2" data-rdays="100">John</li>
        <li data-arrange="1" data-rdays="300">Paul</li>
        <li data-arrange="1" data-rdays="500">Bryan</li>
        <li data-arrange="3" data-rdays="240">Mark</li>
        <li data-arrange="3" data-rdays="500">Victor</li>
        <li data-arrange="4" data-rdays="200">Tess</li>
    </ul>

so from the given element it should return like this

data-arrange attribute value arrangement

then I want to sort it with data-rdays attribute from highest to lowest based on data-arrange attribute arrangement so it will look like something like this

result should be like this

Bryan
Paul
John
Victor
Mark
Tess

This is what I've tried so far:

function sort_li(a, b){
        return ($(b).data('arrange')) < ($(a).data('arrange')) ? 1 : -1; 

  /* Other return staments that I've tried
      return ($(a).data('rdays') && $(b).data('arrange')) < ($(b).data('rdays') 
      && $(a).data('arrange')) ? 1 : -1;     
     return new Date($(a).data("date")) - new Date($(b).data("date")); */

     }

Is there a way how can I accomplish this? Thank you.

Hassan Imam · Accepted Answer · 2018-03-02 05:15:39Z

7

You can first sort on arrange data and for the data with same arrange data sort on rdays data using array#sort.

$(function() {
  $("ul li").sort((a,b) => {
      return $(a).data('arrange') - $(b).data('arrange') || $(b).data('rdays') - $(a).data('rdays');
  }).appendTo('ul');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-arrange="2" data-rdays="100">John</li>
  <li data-arrange="1" data-rdays="300">Paul</li>
  <li data-arrange="1" data-rdays="500">Bryan</li>
  <li data-arrange="3" data-rdays="240">Mark</li>
  <li data-arrange="3" data-rdays="500">Victor</li>
  <li data-arrange="4" data-rdays="200">Tess</li>
</ul>

answered Mar 2, 2018 at 5:15

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

1 Comment

Daniel W Strimpel Over a year ago

I've never thought about sorting by simple subtraction, but that is super elegant actually. Nice...

Daniel W Strimpel · Accepted Answer · 2018-03-02 05:20:06Z

2

This should sort first on the arrange attribute in ascending order and then on the rdays attribute in descending order.

function sort_li(a, b) {
    const arrangeA = +($(a).data('arrange');
    const arrangeB = +$(b).data('arrange');

    if (arrangeA !== arrangeB) {
        // sort arrange in ascending order
        return arrangeA < arrangeB ? -1 : 1;
    }

    const rdaysA = +($(a).data('rdays');
    const rdaysB = +$(b).data('rdays');

    if (rdaysA !== rdaysB) {
        // sort rdays in descending order
        return rdaysA > rdaysB ? -1 : 1;
    }

    return 0;
}

answered Mar 2, 2018 at 5:20

Daniel W Strimpel

8,5002 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

Sort element by two data attributes using jquery sort

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related