Sort by divs content (click)

Question

I have a script that appends the content.

There is only 1 change I need to do, but don't know how.

I want a sort by content of the div every time I click.(ASC to desc or desc to ASC)

What he does now is:

I have 3 divs

<div>Others</div>
<div>Girls</div>
<div>Boy</div>

if I click it changes in

<div>Boy Girls Other</div>
<div>>Boy Girls Other</div>
<div>>Boy Girls Other</div>

My code:

$("#button-sort").click(function(){
    $(".sorteren div").sort(asc_sort).appendTo('.sorteren');

    function asc_sort(a, b){
        return ($(b).text()) < ($(a).text()) ? 1 : -1;
    }

    function dec_sort(a, b){
        return ($(b).text()) > ($(a).text()) ? 1 : -1;    
    }
});

Code that I used before:

var mylist = $('.sorteren');
var listitems = mylist.children('div').get();    
listitems.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});

$.each(listitems, function(index, item) {
    mylist.append(item); 
});

My div structer is:

<div id="drive-content">
  <div class="folderbox">
    <div class="sorteren">
      <div class="items-titel"></div>
    </div>
    <div class="date">
    </div>
  </div>
  <div class="folderbox">
    <div class="sorteren">
      <div class="items-titel"></div>
    </div>
    <div class="date">
    </div>
  </div>
  <div class="folderbox">
    <div class="sorteren">
      <div class="items-titel"></div>
    </div>
    <div class="date">
    </div>
  </div>
</div>

Answer 1

You can add/remove one class to sort asc/desc, and just assign sorted html to one variable and change html of sorteren div as that variable.

 $("#button-sort").click(function() { var sort, el = $('.sorteren') sort = el.find('div').sort(el.hasClass('asc') ? dec_sort : asc_sort) el.toggleClass('asc') function asc_sort(a, b) { return ($(b).text()) < ($(a).text()) ? 1 : -1; } function dec_sort(a, b) { return ($(b).text()) > ($(a).text()) ? 1 : -1; } $(".sorteren").html(sort) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button-sort">sort</button> <div class="sorteren"> <div>Others</div> <div>Girls</div> <div>Boy</div> </div> 

In case you have multiple .sorteren divs and you want to sort each one you can change code to this.

 $("#button-sort").click(function() { function asc_sort(a, b) { return ($(b).text()) < ($(a).text()) ? 1 : -1; } function dec_sort(a, b) { return ($(b).text()) > ($(a).text()) ? 1 : -1; } $(".sorteren").each(function() { var sort, el = $(this) sort = el.find('div').sort(el.hasClass('asc') ? dec_sort : asc_sort) el.toggleClass('asc') el.html(sort) }) }) 

 .sorteren { border: 1px solid black; margin: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button-sort">sort</button> <div class="sorteren"> <div>Others</div> <div>Girls</div> <div>Boy</div> </div> <div class="sorteren"> <div>c</div> <div>a</div> <div>b</div> </div>