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

Question

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.

1) checkboxes don't have any innerHTML, 2) your compare function is not defined, 3) Your array has both checkboxes and labels. what exactly are you doing? — I wrestled a bear once.
– I wrestled a bear once., Commented Nov 15, 2016 at 17:06

adeneo · Accepted Answer · 2016-11-16 13:19:39Z

1

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;">

edited Nov 16, 2016 at 13:19

answered Nov 15, 2016 at 17:13

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fenrir Over a year ago

thanks it worked! can you iterate over it so that after every input and label there is a <br />? I tried to put a <br /> into every second element of the map but it isnt working!

adeneo Over a year ago

@Fenrir - added that as well

Fenrir Over a year ago

wtf youre so fast! I was actually waiting until I could edit the comment to describe the problem more with the demo I've worked on: jsfiddle.net/4pmvE/65

Fenrir Over a year ago

Im actually totally new to maps so I dont know the methods they have and so on...

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related