Problem using .sort to sort elements alphabetically

Question

Am having a problem with sorting using jquery.The elements not getting sorted.I used javascript .sort but this works fine with me if the attribute is numbers but not text. I can solve the issue using append but this is not what am willing to use. Can some one please trouble shoot this code.

jQuery(document).ready(function($) {
  var divList = $(".listing-item");
  var gg = divList.get().sort(function(a, b) {
    return $(a).data("listing-title") < $(b).data("listing-title");
  });
  console.log(gg);
  $("#list").html(divList);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div class="listing-item" data-listing-title="a">
    a
  </div>
  <div class="listing-item" data-listing-title="z">
    z
  </div>
  <div class="listing-item" data-listing-title="b">
    b
  </div>
  <div class="listing-item" data-listing-title="c">
    c
  </div>
</div>

Check [the documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) for the `.sort()` callback. It must return a number to indicate how the two compared elements should be ordered; your callback returns a boolean (`true` or `false`), and that won't work. — Pointy, Jun 19 '19 at 12:27
@Pointy do you have a suggestion for how to solve such an issue? — david, Jun 19 '19 at 12:29
Yes, write a proper sort comparator. The simplest thing to do is to use the string `.localeCompare()` method to compare two strings. It returns exactly the sort of numeric result you need. — Pointy, Jun 19 '19 at 12:30

score 0 · Answer 1 · answered Jun 19 '19 at 12:37

you just need to return a number in the sorting function. Return -1 if the first should be placed before the second. So sort ascending

You can add more conditions.

if($(a).data("listing-title") > $(b).data("listing-title")) return 1 -> descending if($(a).data("listing-title") = $(b).data("listing-title")) return 0 -> no sorting

and put in the HTML the sorted list ( gg instead of divList)

jQuery(document).ready(function($) {
  var divList = $(".listing-item");
  var gg = divList.get().sort(function(a, b) {
    if($(a).data("listing-title") < $(b).data("listing-title")) {
    return -1 ;
    }
  });
  console.log(gg);
  $("#list").html(gg);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div class="listing-item" data-listing-title="a">
    a
  </div>
  <div class="listing-item" data-listing-title="z">
    z
  </div>
  <div class="listing-item" data-listing-title="b">
    b
  </div>
  <div class="listing-item" data-listing-title="c">
    c
  </div>
</div>

score 0 · Accepted Answer · answered Jun 19 '19 at 12:40

Try using .localeCompare(). I have pull this working content from jQuery - Sorting div contents

<!DOCTYPE html>
<htm>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   var divList = $(".listing-item");
   divList.sort(function(a, b) {
    return  $(a).data("listing-title").toUpperCase().localeCompare($(b).data("listing-title").toUpperCase());
});
   $("#list").html(divList);
});
</script>
</head>
<body>

<div id="list">
     <div class="listing-item" data-listing-title="a">a</div>
     <div class="listing-item" data-listing-title="z">z</div>
     <div class="listing-item" data-listing-title="b">b</div>
     <div class="listing-item" data-listing-title="c">c</div>
</div>
</body>
</html>

See also similar question How may I sort a list alphabetically using jQuery?

Thank you ,this solve the issue.but can you describe why you used toUppercase — david, Jun 19 '19 at 13:57

Omar · Answer 3 · 2019-06-19T13:19:08.420

you don't need jQuery for this, and I think the problem is your comparison function, something like this, should make the job for you:

//First select the items
const items = document.querySelectorAll('div#list > .listing-item');
//Next, transform this to an array using `from`, then compare
//using `sort`, finally iterate over the sorted array using `forEach`,
//and append element in the sorted array to the `#list`.
//
Array
  .from(items)
  .sort((x,y) => {
    const valueX = x.dataset.listingTitle;
    const valueY = y.dataset.listingTitle;

    if(valueX > valueY) return 1;
    else if(valueX < valueY) return -1;
    else return 0;
  })
  .forEach(element => document.getElementById('list').appendChild(element));

Problem using .sort to sort elements alphabetically

3 Answers3