sorting divs using jQuery

Question

I'm trying to sort divs using jQuery, it does sort, but does not seems sorting properly.

This is after applying sort

here is HTML snippet.

<div class="container column">
    <div class="row">
        <section class="col-md-10 col-md-offset-3">
            <section class="col-md-2 col-md-offset-1"><a href="./stafferLink/index.php" >Staffer Link</a></section>
            <section class="col-md-2 col-md-offset-1"><a href="./stafferLink/view.php">View Data</a></section>
        </section>
    </div>
</div>

and jQuery

var $divs = $(".container.column");

$(document).ready(function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("a:first").text() > $(b).find("a:first").text();
    });
    $("#container").html(alphabeticallyOrderedDivs);
});

PS: #container is outermost div that contains all divs that need to be in order.

Here it's

sorry, not responsive

jsfiddle.net/arunpjohny/9qmzgk55/3 - can you recreate the case and share the link — Arun P Johny
– Arun P Johny, Commented Jul 31, 2015 at 14:50
im not a bootstrap user but isn't it supposed to be based on 12 col instead of 13 ? just a thought — Radioreve
– Radioreve, Commented Jul 31, 2015 at 15:15

Irvin Dominin · Accepted Answer · 2015-07-31 15:10:19Z

4

It's a casing issue try to sort your element ad ignore the case and using localCompare function.

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

Code:

var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());           
});

Demo: http://jsfiddle.net/bk66on10/

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

answered Jul 31, 2015 at 15:10

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

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

1 Comment

Mubin Over a year ago

Thank you very much sir.. :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

Really it's just about a proper function for sort. There's no sort for jQuery objects, it's basically using Array.prototype.sort. If you check on the documentation:

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

If compareFunction(a, b) is less than 0, sort a to a lower index than b, i.e. a comes first.

If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.

If compareFunction(a, b) is greater than 0, sort b to a lower index than a. compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined.

What you are doing is:

return $(a).find("a:first").text() > $(b).find("a:first").text();

Which depending on how sort does the comparison, true or false values could be casted to 1 or 0 but never -1.

There's an example on the MDN on how to work with it:

  var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];
items.sort(function (a, b) {
  if (a.name > b.name) {
    return 1;
  }
  if (a.name < b.name) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

Visit the MDN page on Array.prototype.sort:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Collectives™ on Stack Overflow

sorting divs using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related