Dennis Dennis - 1 year ago 36
jQuery Question

Sort checkboxes based on their values (in specific order)

I have checkboxes that are placed in a particular order by a wordpress plugin.

The generated HTML code looks like this:

<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
<div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
<div class="wpgmza_cat_checkbox_item_holder_first">
<input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
<div>
<label for="wpgmza_cat_checkbox_0">All</label>
</div>
</div>
<div class="wpgmza_cat_checkbox_item_holder">
<input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2">
<div>
<label for="wpgmza_cat_checkbox_2">Airco</label>
</div>
</div>
<div class="wpgmza_cat_checkbox_item_holder">
<input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_3" name="wpgmza_cat_checkbox" mid="5" value="3">
<div>
<label for="wpgmza_cat_checkbox_3">Vent</label>
</div>
</div>
<div class="wpgmza_cat_checkbox_item_holder">
<input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5">
<div>
<label for="wpgmza_cat_checkbox_5">Sun</label>
</div>
</div>
<div class="wpgmza_cat_checkbox_item_holder">
<input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1">
<div>
<label for="wpgmza_cat_checkbox_1">One</label>
</div>
</div>
</div>
</div>


The following code sorts based (from high to low) based on value:

function sortByID(a, b)
{
return (a.children(“input”).val() > b.children("input").val()) ? 1 : -1;
}

var container = jQuery("div.wpgmza_filter_container");
container.children("div").sort(sortByID).appendTo(container);


Is it possible to sort them based on a list of values I define?
I want them to be displayed in this order (value-based):
3,5,0,1,2

Answer Source

To sort items given in a non-sequential manner you can specify the ordering in an array and then compare the indexOf() of the given values in that array.

Taking my answer to your previous question, you can expand the logic like this:

function sortByValue(a, b) {
  var aVal = parseInt($(a).find('input').val(), 10),
    bVal = parseInt($(b).find('input').val(), 10);
  return order.indexOf(aVal) > order.indexOf(bVal);
}

var order = [3, 5, 0, 1, 2];
var $container = $("div.wpgmza_cat_checkbox_holder");
$container.children("div").sort(sortByValue).appendTo($container);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
  <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
    <div class="wpgmza_cat_checkbox_item_holder_first">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
      <div>
        <label for="wpgmza_cat_checkbox_0">All</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2">
      <div>
        <label for="wpgmza_cat_checkbox_2">Airco</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_3" name="wpgmza_cat_checkbox" mid="5" value="3">
      <div>
        <label for="wpgmza_cat_checkbox_3">Vent</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5">
      <div>
        <label for="wpgmza_cat_checkbox_5">Sun</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1">
      <div>
        <label for="wpgmza_cat_checkbox_1">One</label>
      </div>
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download