0

Not sure, why it isn't working. I've referenced a bunch of stack overflow answers, but nothing seems to make a difference. I'm just trying to sort all the divs with class="searchMe" by a data-sortStart attribute. The data-sortStart part works fine, so I didn't include that function in this example, but it's basically a for loop that gives each successive div in the loop a data-sortStart of += 1.

here's my code:

$("#search_button").on("click", function() {
  appendicize($('.searchMe').sort(reSort));
});

function appendicize(el){
  var container = $('#whatWhat');
      container.html('');
  el.each(function(){
    $(this).appendTo(container);
  });
}

$('.searchMe').reSort(function (a, b) {
  var contentA = $(a).attr('data-sortStart'),
      contentB = $(b).attr('data-sortStart');
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})
mmm
  • 2,272
  • 3
  • 25
  • 41
  • 3
    I don't see where you have a function named `reSort` for `$('.searchMe').sort(reSort)`, or where you've defined a jQuery plugin called `reSort` for `$('.searchMe').reSort(function (a, b) {`. –  Aug 02 '13 at 21:00
  • 1
    ...did you mean `function reSort(a, b) {...` instead of `$('.searchMe').reSort(function (a, b) {`? –  Aug 02 '13 at 21:02
  • ahhhhh that may be it... let me test that out. – mmm Aug 02 '13 at 21:04
  • 1
    FYI, you can do `return contentA.localeCompare(contentB)`. –  Aug 02 '13 at 21:06
  • It's ALMOST completely working, now the issue is that I have 11 items total, and it's putting #'s 10 and 11 right after #1, but everything else is sorted properly. – mmm Aug 02 '13 at 21:09
  • I recommend you putting the main points of your comment into an answer so that I can accept it if it winds up all working out. – mmm Aug 02 '13 at 21:09
  • 1
    If you intend to do a numeric comparison, then you need to convert the numeric strings to numbers. So `var contentA = +$(a).attr('data-sortStart')`... and so on. Which means no more `.localeCompare()`. –  Aug 02 '13 at 21:09
  • I was using parseInt before, but I had the same result without it, I wasn't sure that it was necessary. – mmm Aug 02 '13 at 21:10
  • 1
    Yeah, it's not necessary when comparing numeric strings of equal decimal places. But if they're not equal, then for example the string `"10"` is considered lower than the string `"2"` –  Aug 02 '13 at 21:12
  • effin a. Beautiful, works perfectly now! – mmm Aug 02 '13 at 21:14
  • 1
    Good. You can post an answer if you'd like, or just delete. Up to you. –  Aug 02 '13 at 21:14
  • don't you want reputation points? lol – mmm Aug 02 '13 at 21:15
  • either way, thank you!!! – mmm Aug 02 '13 at 21:15
  • 1
    Nah, don't care about points. You're welcome. –  Aug 02 '13 at 21:17

1 Answers1

0

The solution as pointed out by Crazy Train is as follows:

$(#search_button).click(function() {
  appendicize($('.searchMe').sort(reSort));
});

function appendicize(el){
  var container = $('#whatWhat');
      container.html('');
  el.each(function(){
    $(this).appendTo(container);
  });
}

function reSort(a, b) {
  var contentA = +$(a).attr('data-sortStart'),
      contentB = +$(b).attr('data-sortStart');
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
}

Adding a '+' before the variable initializers in the reSort function will properly compare the data-sortStart attributes as integers instead of strings (with strings a 10 is less than a 2) which explains why I was getting elements #10 and #11 sorted above the #2 element. Also initially the reSort function was not being called because I had it written like this:

$('.searchMe').reSort(function (a, b) {

instead of like this:

function reSort(a, b) {

The first way was unnecessary as I was already passing in $('.searchMe') up above when I call the functions:

appendicize($('.searchMe').sort(reSort));

thanks again crazy train :)

mmm
  • 2,272
  • 3
  • 25
  • 41