Sort Input Values in a Custom Order

Question

I have multiple radio buttons with different values. I would like to sort these buttons according to the value or id in this order:

FedEx Ground
UPS Ground
Custom 1
Custom 2

Since the classes and names are the same for all options, the values, and ID's differ. I've tried using JavaScript but besides using ascending, descending, and random sort, I cannot figure out how to sort the options in a custom order by value.

<ul id="shipping_method">
 <li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_1" value="booster_custom_shipping_1" class="shipping_method" checked="checked">
  <label for="shipping_method_custom_shipping_1">Custom 1:</label>
 </li>
 <li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_2" value="booster_custom_shipping_2" class="shipping_method">
  <label for="shipping_method_custom_shipping_2">Custom 2:</label>
 </li>
 <li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_3" value="FedEx - FedEx Ground" class="shipping_method">
  <label for="shipping_method_fedex_ground">FedEx Ground:</label>
 </li>
 <li>
   <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_4" value="UPS - UPS Ground" class="shipping_method">
   <label for="shipping_method_ups-ground">UPS Ground:</label>
 </li>
</ul>

Well, it's a custom order, so why would you think that numeric values or string sorts would work? — Scott Marcus, May 30 '17 at 19:26
You want the actual buttons displayed in your custom sort order? — Scott Marcus, May 30 '17 at 19:31
Duplicated? [Sort HTML list with HTML content using JQuery](https://stackoverflow.com/questions/10288576/sort-html-list-with-html-content-using-jquery) — Slava Ivanov, May 30 '17 at 19:44
I'm assuming you're dynamically generating these `input`s, yes? If so, where are the values coming from? If not, reorder them in your HTML however you'd like. — jeffdill2, May 30 '17 at 20:12

score 0 · Answer 1 · answered May 30 '17 at 19:46

A custom sort function would work... for example:

.sort(function(a, b) {
    if(a.value === b.value)
        return 0;

    switch(a.value) {
        case 'FedEx - FedEx Ground':
            return -1;
        case 'UPS - UPS Ground':
            if(b.value === 'FedEx - FedEx Ground')
                return 1;
            else
                return -1;
        case 'booster_custom_shipping_1':
            if(b.value === 'FedEx - FedEx Ground' || b.value === 'UPS - UPS Ground')
                return 1;
            else
                return -1;
        default:
            return 1;
    }
});

Paul Roub · Accepted Answer · 2017-05-30T20:01:40.067

Create an ordering object, look up the value in there, and sort based on that:

var ordering = {
  "FedEx - FedEx Ground":      1,
  "UPS - UPS Ground":          2,
  "booster_custom_shipping_1": 3,
  "booster_custom_shipping_2": 4
};

$('#shipping_method > li').
  sort(
    function(a, b) {
      // for each <li>, get the value of the <input> it contains
      // look up that value in `ordering`, and use that for comparison
      //
      return ordering[ $('input', a).val() ] - ordering[ $('input', b).val() ];
    }
  ).
  each(
    // appending each element in sorted order leaves a sorted list behind
    //
    function() {
      $('#shipping_method').append(this);
    }
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="shipping_method">
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_1" value="booster_custom_shipping_1" class="shipping_method" checked="checked">
    <label for="shipping_method_custom_shipping_1">Custom 1:</label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_2" value="booster_custom_shipping_2" class="shipping_method">
    <label for="shipping_method_custom_shipping_2">Custom 2:</label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_3" value="FedEx - FedEx Ground" class="shipping_method">
    <label for="shipping_method_fedex_ground">FedEx Ground:</label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_4" value="UPS - UPS Ground" class="shipping_method">
    <label for="shipping_method_ups-ground">UPS Ground:</label>
  </li>
</ul>

This is absolutely beautiful. Works like a charm. I now understand the approach. I added the script to the `$(document).ready(function()`. Thanks a million Paul! — Don Misquitta, May 30 '17 at 20:23

Sort Input Values in a Custom Order

2 Answers2