CODEWITHSUNDEEP
javascriptjqueryhtmlcsssorting
Mubin
Mubin

Reputation: 4425

sorting divs using jQuery

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

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

Upvotes: 4

Views: 1914

Answers (2)

MinusFour
MinusFour

Reputation: 14423

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

Upvotes: 2

Irvin Dominin
Irvin Dominin

Reputation: 30993

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

Upvotes: 4

Related Questions