jQuery   

Sort divs alphabetically or numerically using jQuery

Sort DIVs alphabetically using jQuery

<script>
jQuery(document).ready(function($){
  $('.sortable-text [data-sort]').sort(function(a, b) {
    if ($(a).data("sort") < $(b).data("sort")) {
      return -1;
    } else {
      return 1;
    }
  }).appendTo('.sortable-text');
});
</script>
<div class="sortable-text">
    <div data-sort="c">c</div>
    <div data-sort="e">e</div>
    <div data-sort="a">a</div>
    <div data-sort="d">d</div>
    <div data-sort="b">b</div>
</div>

Sort DIVs numerically using jQuery

<script>
jQuery(document).ready(function($){
  $('.sortable-numeric [data-sort]').sort(function(a, b) {
    if ($(a).data("sort") < $(b).data("sort")) {
      return -1;
    } else {
      return 1;
    }
  }).appendTo('.sortable-numeric');
});
</script>
<div class="sortable-numeric">
    <div data-sort="3">3</div>
    <div data-sort="5">5</div>
    <div data-sort="1">1</div>
    <div data-sort="4">4</div>
    <div data-sort="2">2</div>
</div>
Need a helping hand in fixing your website issues?

If you are facing any problems in implementing these code snippets and tutorials, you can hire us to fix your website issues.

Hire Us