jquery - sort array based on conditions using javascript sort function - Stack Overflow

admin管理员组

文章数量:1333442

I want to sort an javascript array based on numbers but I wanted a specific group (e.g. Remended) es first and ascending, followed by other group that has no types.

Below are the divs, I wanted to sort in such a way that the Remended es first and in ascending order followed by other divs in ascending order.

Below code is sorting the divs with no data-type in ascending order correctly but the Remended is not sorting in ascending order as expected.

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);
console.log(sortedDivs); 

function sorter(a, b) {
    if(a.getAttribute('data-type') == 'Remended'){
        if (parseFloat(a.getAttribute('data-amount')) < parseFloat(b.getAttribute('data-amount'))){
          return -1;
        }
        return 0;
    }
    else{
      if (parseFloat(a.getAttribute('data-amount')) > parseFloat(b.getAttribute('data-amount'))){
        return 1;
      }
      return 0;
    }
  }

Above code sorts the divs in such form as;

<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
    <div class="terminalpopular" data-amount="65.95" data-type="Remended">
    </div>
    <div class="terminalpopular" data-amount="94.95" data-type="Remended">  </div>
    <div class="terminalpopular" data-amount="70" data-type="Remended">
    </div>
    <div class="terminalpopular" data-amount="54.95" data-type="">
    </div>
    <div class="terminalpopular" data-amount="67.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="75" data-type="">
    </div>
    <div class="terminalpopular" data-amount="78" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    </div>

As, it can be seen that divs without any data-type is sorted correctly but Remended divs are not sorted in ascending order as expected.

Note: It does e in IF clause and condition does meet i.e. (if(a.getAttribute('data-type') == 'Remended'){}). I have put console in IF and it does pare values.

Please, help. Thanks

I want to sort an javascript array based on numbers but I wanted a specific group (e.g. Remended) es first and ascending, followed by other group that has no types.

Below are the divs, I wanted to sort in such a way that the Remended es first and in ascending order followed by other divs in ascending order.

Below code is sorting the divs with no data-type in ascending order correctly but the Remended is not sorting in ascending order as expected.

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);
console.log(sortedDivs); 

function sorter(a, b) {
    if(a.getAttribute('data-type') == 'Remended'){
        if (parseFloat(a.getAttribute('data-amount')) < parseFloat(b.getAttribute('data-amount'))){
          return -1;
        }
        return 0;
    }
    else{
      if (parseFloat(a.getAttribute('data-amount')) > parseFloat(b.getAttribute('data-amount'))){
        return 1;
      }
      return 0;
    }
  }

Above code sorts the divs in such form as;

<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
    <div class="terminalpopular" data-amount="65.95" data-type="Remended">
    </div>
    <div class="terminalpopular" data-amount="94.95" data-type="Remended">  </div>
    <div class="terminalpopular" data-amount="70" data-type="Remended">
    </div>
    <div class="terminalpopular" data-amount="54.95" data-type="">
    </div>
    <div class="terminalpopular" data-amount="67.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="75" data-type="">
    </div>
    <div class="terminalpopular" data-amount="78" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    </div>

As, it can be seen that divs without any data-type is sorted correctly but Remended divs are not sorted in ascending order as expected.

Note: It does e in IF clause and condition does meet i.e. (if(a.getAttribute('data-type') == 'Remended'){}). I have put console in IF and it does pare values.

Please, help. Thanks

• javascript
• jquery
• sorting

Share Follow edited Sep 19, 2017 at 5:22 Owais asked Sep 19, 2017 at 4:59 OwaisOwais 86022 gold badges1313 silver badges3232 bronze badges 2

• Only return 0 if they are equal. At the two places where you return 0 it is not sure that both are equal, add another check – whymatter Commented Sep 19, 2017 at 5:04
• If you can share your HTML instead of just snapshot, it would help – Rajesh Commented Sep 19, 2017 at 5:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

thanks to type coercion in JS you can use a Boolean (like in a parison) as a Number. And the same with the Strings. Since - is a numeric operation, the strings will be casted to Numbers, too.

So you can treat this like a simple numeric sort on two "properties".

function sorter(a, b) {
    return (b.dataset.type === 'Remended') - (a.dataset.type === 'Remended') 
        || a.dataset.amount - b.dataset.amount;
}

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);

console.log(sortedDivs)

.as-console-wrapper{top:0;max-height:100%!important}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
  <div class="terminalpopular" data-amount="65.95" data-type="Remended">
  </div>
  </div>
  <div class="terminalpopular" data-amount="54.95">
  </div>
  <div class="terminalpopular" data-amount="70" data-type="Remended">
  <div class="terminalpopular" data-amount="84.99">
  </div>
  <div class="terminalpopular" data-amount="94.95" data-type="Remended"> </div>
  <div class="terminalpopular" data-amount="75">
  </div>
  <div class="terminalpopular" data-amount="67.99">
  </div>
  <div class="terminalpopular" data-amount="78">
  </div>
  <div class="terminalpopular" data-amount="84.99">
  </div>
</div>

If elements of a type are to be ordered amongst themselves before the others, you should probably separate them in an array and sort them there, merging them wiht the rest of the sorted elements later.

Try this:

 var sortedDivs1 = $(".terminalpopular").toArray().filter(function(){
               return $(this).attr('data-type') == 'Remended'
            }).sort(sorter);
 var sortedDivs2 = $(".terminalpopular").toArray().filter(function(){
               return $(this).attr('data-type') != 'Remended'
            }).sort(sorter);
var sortedDivs = $.merge(sortedDivs1, sortedDivs2);
console.log(sortedDivs); 

function sorter(a, b) {

        return parseFloat(a.getAttribute('data-amount')) - 
               parseFloat(b.getAttribute('data-amount'));
 }

You have to return 0 only when both are equal.

Use this at both places where you pare the amount attribute:

return parseFloat(a.getAttribute('data-amount')) - parseFloat(b.getAttribute('data-amount'))

I don't know if it can be done in just one sort, but with two, this is working for me...

var myList = $(".terminalpopular");

myList.sort(function(a, b){
    return $(a).data("amount")-$(b).data("amount");
}).sort(function(a, b){
    if ($(a).data("type") == "Remended" && !$(b).data("type"))
        return -1;
    else if (!$(a).data("type") && $(b).data("type") == "Remended")
        return 1;
    else
        return 0;
});

$("#list_view_listingpopular").html(myList);

Here you have a fiddle... https://fiddle.jshell/rigobauer/c47Lfq8c/

I hope it helps.

You can use a simple logic:

• Create 4 flags, 2 for element is remended and 2 for amount value
• Since remended has higher precedence than amount, it should e first.
• If both are remended, check for amount

function sortList() {
  var list = $('.terminalpopular');
  var clone = list.clone();
  var remended = 'Remended'
  clone.sort(function(a, b) {
    var isARemended = $(a).data('type') === remended ? -10 : 0;
    var isBRemended = $(b).data('type') === remended ? -10 : 0;

    var amountA = Number($(a).data('amount'));
    var amountB = Number($(b).data('amount'));

    return isARemended - isBRemended || amountA - amountB;
  });
  list.parent().empty().append(clone)
}

// This is only for display purpose
function displayValue() {
  $('.terminalpopular').each(function(i, el) {
    $(el).text($(el).data('amount'));
    if ($(el).data('type')) {
      $(el).addClass('highlight')
    }
  })
}

displayValue();
sortList();

.terminalpopular {
  height: 30px;
  border: 1px solid gray;
}

.highlight {
  background: #ddd;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
  <div class="terminalpopular" data-amount="65.95" data-type="Remended">
  </div>
  <div class="terminalpopular" data-amount="94.95" data-type="Remended"> </div>
  <div class="terminalpopular" data-amount="70" data-type="Remended">
  </div>
  <div class="terminalpopular" data-amount="54.95" data-type="">
  </div>
  <div class="terminalpopular" data-amount="67.99" data-type="">
  </div>
  <div class="terminalpopular" data-amount="75" data-type="">
  </div>
  <div class="terminalpopular" data-amount="78" data-type="">
  </div>
  <div class="terminalpopular" data-amount="84.99" data-type="">
  </div>
  <div class="terminalpopular" data-amount="84.99" data-type="">
  </div>
</div>

本文标签： jquerysort array based on conditions using javascript sort functionStack Overflow