Strange alphabetical sorting of checkbox lists

Question

I have 4 checkboxes, each representing a region. Clicking any one of them shows 3 countries relevant to that region. Clicking combinations of the regional checkboxes shows all the relevant countries in-line, but I want the list of country checkboxes to always be displayed in alphabetical order.

Strangely my jquery seemed to work for 3 regional checkboxes, but doesn't seem to work for 4. I just can't see what dumb mistake I'm making and am starting to suspect something more sinister. Here's my fiddle: https://jsfiddle.net/m5v7v6kv/

Thanks for any help.

function sortByText(a, b) {
    return $.trim($(a).text()) > $.trim($(b).text());
}

var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)

$('input[type="checkbox"]').click(function() {
    $('.my' + $(this).attr("id")).slideToggle(200)
})

.CountryWrapper {
    border: 1px solid blue;
    height: 150px;
    width: 480px;
    border: 1px solid blue;
}
.myEuropeCountries {
    display: none;
}
.myNAMCountries {
    display: none;
}
.mySAMCountries {
    display: none;
}
.myAfricaMECountries {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="EuropeCountries" />Europe</label>
<label><input type="checkbox" id="NAMCountries" />North America</label>
<label><input type="checkbox" id="SAMCountries" />South America</label>
<label><input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>

<div class="CountryWrapper">
    <br>
    <label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label>
    
    <label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
    <label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
    <label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>

    <label class="mySAMCountries"><input type="checkbox" value="Brazil" />Brazil</label>
    <label class="mySAMCountries"><input type="checkbox" value="Argentina" />Argentina</label>
    <label class="mySAMCountries"><input type="checkbox" value="Chile" />Chile</label>

    <label class="myAfricaMECountries"><input type="checkbox" value="SouthAfrica" />South Africa</label>
    <label class="myAfricaMECountries"><input type="checkbox" value="Egypt" />Egypt</label>
    <label class="myAfricaMECountries"><input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>

You will only ever return `1` or `0`. Sort wants a positive number, 0, or negative number. http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript — Gavin, Nov 11 '16 at 16:20
You need to return `-1`, `0`, or `1` depending on the result of comparing `a` with `b`. Returning `0` (or anything that coerces to `0`) is telling the sorting function that the items are to be considered equal. — Phylogenesis, Nov 11 '16 at 16:21
@Silverburch Something like `if (a < b) { return -1; } if (a == b) { return 0; } if (a > b) { return 1; }` — Phylogenesis, Nov 11 '16 at 16:24
Are you able to put that in the fiddle as my brain has gone into meltdown! — Silverburch, Nov 11 '16 at 16:28

epascarello · Accepted Answer · 2016-11-11T16:36:18.387

Looks like your compare function should return 1 or -1. There is really no reason to return 0 in your case unless somehow two countries will have the same name.

return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;

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

var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)

$('input[type="checkbox"]').click(function() {
  $('.my' + $(this).attr("id")).slideToggle(200)
})

.CountryWrapper {
  border: 1px solid blue;
  height: 150px;
  width: 480px;
  border: 1px solid blue;
}

.myEuropeCountries {
  display: none;
}

.myNAMCountries {
  display: none;
}

.mySAMCountries {
  display: none;
}

.myAfricaMECountries {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="checkbox" id="EuropeCountries" />Europe</label>

<label>
  <input type="checkbox" id="NAMCountries" />North America</label>

<label>
  <input type="checkbox" id="SAMCountries" />South America</label>

<label>
  <input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>

<!-------------------------------------------------------------------->

<div class="CountryWrapper">

  <br>
  <label class="myEuropeCountries">
    <input type="checkbox" value="Spain" />Spain</label>
  <label class="myEuropeCountries">
    <input type="checkbox" value="Germany" />Germany</label>
  <label class="myEuropeCountries">
    <input type="checkbox" value="Austria" />Austria</label>

  <label class="myNAMCountries">
    <input type="checkbox" value="USA" />USA</label>
  <label class="myNAMCountries">
    <input type="checkbox" value="Mexico" />Mexico</label>
  <label class="myNAMCountries">
    <input type="checkbox" value="Canada" />Canada</label>

  <label class="mySAMCountries">
    <input type="checkbox" value="Brazil" />Brazil</label>
  <label class="mySAMCountries">
    <input type="checkbox" value="Argentina" />Argentina</label>
  <label class="mySAMCountries">
    <input type="checkbox" value="Chile" />Chile</label>

  <label class="myAfricaMECountries">
    <input type="checkbox" value="SouthAfrica" />South Africa</label>
  <label class="myAfricaMECountries">
    <input type="checkbox" value="Egypt" />Egypt</label>
  <label class="myAfricaMECountries">
    <input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>

</div>

Thanks everyone, but particularly to @epascarello for the detail. All works great now. I'm still a bit confused why, if I take say, S.America out, everything worked as it should. — Silverburch, Nov 11 '16 at 16:48

Strange alphabetical sorting of checkbox lists

1 Answers1