JSFiddle - React, Tailwind, and code Playground
by Frost819
HTML
<ul class="tab-cell cols3">
<li class="make-cols">
<label class="control control--checkbox ">
<input data-url="/sale/?SIZE_US=1" type="checkbox" value="1" name="FILTER[PROP][SIZE_US][]">
<div class="control__indicator"></div>
<span class="label_value">1</span>
</label>
</li>
<li class="make-cols">
<label class="control control--checkbox ">
<input data-url="/sale/?SIZE_US=1%2C5" type="checkbox" value="1,5" name="FILTER[PROP][SIZE_US][]">
<div class="control__indicator"></div>
<span class="label_value">1,5</span>
</label>
</li>
<li...
JavaScript
(function($) {
$.fn.ulSort = function() {
var makeSorting = function() {
var tmp = [],
$this = $(this),
case_insensitive_comp = function(strA, strB) {
return +strA.val > +strB.val;
};
$this.find('input').each(function(i, elem) {
console.log($this)
if ($(elem).has('ul'))
$('ul', elem).ulSort();
tmp.push({
val: $(this).clone().children().remove().end().text(),
el: $(elem)
});
});
sorted = tmp.sort(case_insensitive_comp);
$this.empty();
sorted.forEach(function(item) {
$this.append(item.el);
});
}
return this.each(makeSorting);
};
})(jQuery);
$(document).ready(function() {
$('.tab-cell').ulSort();
});