JQuery sort checkboxes inside div based on value
I have a couple of checkboxes generated by a plugin in Wordpress. I have no way of sorting these checkboxes, so I would like them to be sorted by their highest value.
the generated HTML 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_1" name="wpgmza_cat_checkbox" mid="5" value="1">
<div>
<label for="wpgmza_cat_checkbox_1">Airco</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">Vent</label>
</div>
</div>
</div>
</div>
I tried the following code:
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);
source to share
The problem with your sorting logic is that you are comparing strings and also sorting children .wpgmza_filter_container
of which there is only one. You need to sort the children .wpgmza_cat_checkbox_holder
. You are also using an invalid double quote character in your sorting logic. Try the following:
function sortByValue(a, b) {
var aVal = parseInt($(a).find('input').val(), 10),
bVal = parseInt($(b).find('input').val(), 10);
return aVal < bVal;
}
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.1/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_1" name="wpgmza_cat_checkbox" mid="5" value="1">
<div>
<label for="wpgmza_cat_checkbox_1">Airco</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">Vent</label>
</div>
</div>
</div>
</div>
If you want to make sure the All selection stays first in the list, you can exclude the filter logic from that div using :not
:
$container.children('div:not(".wpgmza_cat_checkbox_item_holder_first")').sort(sortByValue).appendTo($container);
source to share