CODEWITHSUNDEEP
javascriptjqueryhtml
Pepe
Pepe

Reputation: 1002

jQuery sorting fails

I have the following html structur (endless):

<div class="wrapper">
   <div class="content"> Its block 3
      <div class="number">3</div>
   </div>
</div>

<div class="wrapper">
   <div class="content"> Its block 2
      <div class="number">2</div>
   </div>
</div>

I want to sort it by clicking a button like this:

<div class="wrapper">
   <div class="content"> Its block 2  <--- new order
      <div class="number">2</div> <--- new order
   </div>
</div>

<div class="wrapper">
   <div class="content"> Its block 3  <--- new order
      <div class="number">3</div> <--- new order
   </div>
</div>

... but with my script it doesn´t work (because of the same div class name, I think?). So, how can I sort this and toggle the sort by highest number and lowest number? Can anybody help me?

function sortHigh(a, b) {
    var date1 = $(a).find(".content .number").text()
    var date2 = $(b).find(".content .number").text();

    return $(a).find(".content .number").text() > $(b).find(".content .number").text();
};

function sortLow(a, b) {
    var date1 = $(a).find(".content .number").text()
    var date2 = $(b).find(".content .number").text();

    return $(a).find(".content .number").text() < $(b).find(".content .number").text();
};


//how to toggle?
$(function () {
    $('.sort').click(function () {
        $('.content').sort(sortHigh).appendTo('.wrapper');
    }, function () {
        $('.content').sort(sortLow).appendTo('.wrapper');
    });
});

Thats my bad try: fiddle

Upvotes: 1

Views: 117

Answers (4)

Jamy
Jamy

Reputation: 911

You have two issues with your code.

The first is that your sorts are sorting strings. return "2" > "3" for example.

The other issue is that the click function you're using isn't toggling correctly. I'm guessing you're familiar with the .hover() syntax which is why you've done it that way.

As you can see, I'm forcing sortHigh and sortLow to return Numbers. I've also done a sorting low/high check and toggle within the click function.

function sortHigh(a, b) {
    var date1 = Number($(a).find(".number").text());
    var date2 = Number($(b).find(".number").text());

    return date1 > date2;
};

function sortLow(a, b) {
    var date1 = Number($(a).find(".number").text());
    var date2 = Number($(b).find(".number").text());

    return date1 <= date2;
};

$(function(){
    var sortHighCheck = null;

    $('.sort').click(function(){
        if (sortHighCheck === true) {
            $('.wrapper').sort(sortLow).appendTo('.list')
            sortHighCheck = false;
        } else {
            $('.wrapper').sort(sortHigh).appendTo('.list')
            sortHighCheck = true;
        }
    });
});

Edit: Forgot to add the jsfiddle link

Upvotes: 1

Selfish
Selfish

Reputation: 6200

Using jQuery, you can add the sort functionality as such:

jQuery.fn.sortDomElements = (function() {
  return function(comparator) {
    return Array.prototype.sort.call(this, comparator).each(function(i) {
      this.parentNode.appendChild(this);
    });
  };
})();

var srtdesc = true;

$(function() {
  $(".sort").click(function() {
    srtdesc = !srtdesc;
    $(".list").children().sortDomElements(function(a, b) {
      if (srtdesc) {
        return Number($(a).find('.number').text()) - Number($(b).find('.number').text());
      } else {
        return Number($(b).find('.number').text()) - Number($(a).find('.number').text());
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort">Sort-Button</button>

<div class="list">
  <div class="wrapper">
    <div class="content">Its block 3
      <div class="number">3</div>
    </div>
  </div>

  <div class="wrapper">
    <div class="content">Its block 1
      <div class="number">1</div>
    </div>
  </div>

  <div class="wrapper">
    <div class="content">Its block 2
      <div class="number">2</div>
    </div>
  </div>
</div>

Upvotes: 1

Dario De Caneva
Dario De Caneva

Reputation: 1

If you want to sort, you can add data-val attribute to each content div:

<div class="content" data-val="2"> Its block 2  <--- new order

and sort each wrapper div with this code:

jQuery("#sort").click( function() {
    jQuery('.wrapper').sort(function (a, b) {
        return jQuery(a).find('.content').data('val') - jQuery(b).find('.content').data('val');
    }).each(function (_, container) {
        jQuery(container).parent().append(container);
    });
});

Upvotes: 0

Umesh Sehta
Umesh Sehta

Reputation: 10659

try to change your code with this:-

var toggle="high";
//how to toggle?
$(function(){
 $('.sort').click(function () {
    if (toggle == "high") {            
        toggle = "low";
        $('.list').html($('.list .wrapper').sort(sortLow));
    } else {          
        toggle = "high"
        $('.list').html($('.list .wrapper').sort(sortHigh));
    }
  });
});

Demo

Upvotes: 4

Related Questions