I try to sort in alphabetical my classes by the attr alt, but it doesn't work and I don't find the error.
<div class="box" alt="B"></div>
<div class="box" alt="A"></div>
<div class="box" alt="C"></div>
<div class="box" alt="E"></div>
<div class="box" alt="F"></div>
<div class="box" alt="D"></div>
var boxes = $('.box');
var orderedBoxes = boxes.sort(function(a, b){
return $(a).attr('alt') - $(b).attr('alt')
});
console.log(orderedBoxes)
You can use String.prototype.localeCompare
var boxes = $('.box');
var orderedBoxes = boxes.get().sort(function(a, b){
return $(a).attr('alt').localeCompare($(b).attr('alt'));
});
console.log(orderedBoxes)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" alt="B"></div>
<div class="box" alt="A"></div>
<div class="box" alt="C"></div>
<div class="box" alt="E"></div>
<div class="box" alt="F"></div>
<div class="box" alt="D"></div>You can detach the nodes, sort, and re-append with a simple jQuery plugin.
(function($) {
function detatchAndSort($nodes, comparator) {
$nodes.parent().append($nodes.detach().sort(comparator));
return $nodes;
};
$.fn.sortByAttr = function(attr) {
return detatchAndSort(this, function(that, other) {
return $(that).attr(attr).localeCompare($(other).attr(attr));
});
};
$.fn.sortByText = function() {
return detatchAndSort(this, function(that, other) {
return $(that).text().localeCompare($(other).text());
});
};
})(jQuery);
$('.box').sortByAttr('alt'); // Sort in-place<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" alt="B">B</div>
<div class="box" alt="A">A</div>
<div class="box" alt="C">C</div>
<div class="box" alt="E">E</div>
<div class="box" alt="F">F</div>
<div class="box" alt="D">D</div>