jQuery sorting fails

Question

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

"with my script" - What script? Please show the relevant code directly in the question, not just via a link to an external site. — nnnnnn
– nnnnnn, Commented Dec 1, 2015 at 11:45
Thats also the problem, I want to sort both, but the sort based on the number. So "Content" and "Number" have to sorting together (they are a group). — Pepe
– Pepe, Commented Dec 1, 2015 at 11:48

Umesh Sehta · Accepted Answer · 2015-12-01 11:50:56Z

4

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

answered Dec 1, 2015 at 11:50

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

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

2 Comments

Pepe Over a year ago

Big thx for support - absolutly what I was looking for!! So my click-action (toggle) was wrong ... good to know.

Umesh Sehta Over a year ago

@Pepe happy to help you :)

Selfish · Accepted Answer · 2015-12-01 12:53:15Z

1

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>

edited Dec 1, 2015 at 12:53

answered Dec 1, 2015 at 12:37

Selfish

6,2284 gold badges47 silver badges66 bronze badges

1 Comment

Pepe Over a year ago

Looks interesting - I will test it too. Thx for support!!

Jamy · Accepted Answer · 2015-12-01 13:00:27Z

1

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

edited Dec 1, 2015 at 13:00

answered Dec 1, 2015 at 12:19

Jamy

9118 silver badges12 bronze badges

10 Comments

Pepe Over a year ago

Also thx for support and explanation! I will test your way too. ... UPDATE: I´ve test it now, maybe I do something wrong, but it doesnt work for me.

Pepe Over a year ago

Thx for the link - I see, that you edit the html structur. Thats the problem in my case, the structur cant be modified.

Jamy Over a year ago

I've fixed the jsfiddle so it has your structure: jsfiddle.net/o954txn6/6 All it requires is moving everything one level up, sort the .wrapper and append to .list

Pepe Over a year ago

Thx for the update, now it works like charm - great support!!

Pepe Over a year ago

I found one bug, the script doesnt work at the IE ;( - why?

|

Dario De Caneva · Accepted Answer · 2015-12-01 12:09:07Z

0

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);
    });
});

answered Dec 1, 2015 at 12:09

Dario De Caneva

11 bronze badge

1 Comment

Pepe Over a year ago

Also thx for support, but in my case I cant add any html attributes.

Collectives™ on Stack Overflow

jQuery sorting fails

4 Answers 4

2 Comments

1 Comment

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related