Fenrir Fenrir - 17 days ago 6
HTML Question

Sorting an array that contains html objects by their inner html text

I have here some computer generated text that I need to sort with javascript.

I copied the html markup to edit it and to create a sort function in javascript.

What I have to do is sorting an array of html objects by their inner html text.
I couldnt find out how to get their text for sorting. I need the html object to append it to the html afterwards too.

I don't know how I can describe this further so I'm just showing it here
http://jsfiddle.net/4pmvE/64/

<div class="userDataRoleList" style="float:left;">
<input id="PostedRoles_RoleIds44" name="PostedRoles.RoleIds" type="checkbox" value="1">
<label for="PostedRoles_RoleIds44">SAP</label>
<input id="PostedRoles_RoleIds45" name="PostedRoles.RoleIds" type="checkbox" value="2">
<label for="PostedRoles_RoleIds45">Buffer</label>
<input id="PostedRoles_RoleIds46" name="PostedRoles.RoleIds" type="checkbox" value="4">
<label for="PostedRoles_RoleIds46">testing purposes</label>
<input id="PostedRoles_RoleIds47" name="PostedRoles.RoleIds" type="checkbox" value="5">
<label for="PostedRoles_RoleIds47">test</label>
</div>

<div class="userDataRoleList" style="float:left;">

</div>
<div style="clear:both;">

let checkboxlist = [];
let checkboxes = [];

<script>
window.onload = function(){
$(document).ready(function () {
checkboxes = $('.userDataRoleList input');
labeltext = $('.userDataRoleList label');
for(let i = 0; i < checkboxes.length; i++){
checkboxlist.push(checkboxes[i], labeltext[i]);
}
checkboxlist = checkboxlist.sort(compare);
console.log(checkboxlist);
for(let i = 0; i < checkboxlist.length; i++){
$('.userDataRoleList:first-child').append(checkboxlist[i]);
}
});
}
</script>


notice, that the elements must correspond to their checkboxes, no edits on the html allowed, since its purely computer generated and I cant bypass that.

Answer

Sort the labels in the collection, then add the inputs, and append them back

$('.userDataRoleList label').sort(function(a,b) {
    return $(a).text().localeCompare($(b).text())
}).map(function() {
    return $(this).prev('input').addBack().add('<br>').get();
}).appendTo('.userDataRoleList:first');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="userDataRoleList" style="float:left;">
    <input id="PostedRoles_RoleIds44" name="PostedRoles.RoleIds" type="checkbox" value="1">
    <label for="PostedRoles_RoleIds44">SAP</label>
    <input id="PostedRoles_RoleIds45" name="PostedRoles.RoleIds" type="checkbox" value="2">
    <label for="PostedRoles_RoleIds45">Buffer</label>
    <input id="PostedRoles_RoleIds46" name="PostedRoles.RoleIds" type="checkbox" value="4">
    <label for="PostedRoles_RoleIds46">testing purposes</label>
    <input id="PostedRoles_RoleIds47" name="PostedRoles.RoleIds" type="checkbox" value="5">
    <label for="PostedRoles_RoleIds47">test</label>
</div>

<div class="userDataRoleList" style="float:left;">

</div>
<div style="clear:both;">

Comments