按其内部 html 文本对包含 html 对象的数组进行排序

Question

我这里有一些计算机生成的文本，需要用 javascript 进行排序。

我复制了 html 标记来编辑它并在 javascript 中创建一个排序函数。

我要做的就是通过它们的内部 html 文本对一组 html 对象进行排序。 我不知道如何让他们的文本进行排序。之后我也需要 html 对象将其附加到 html 中。

我不知道如何进一步描述，所以我只是在这里展示它 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>

注意，元素必须与它们的复选框相对应，不允许对 html 进行编辑，因为它纯粹是计算机生成的，我无法绕过它。

Answer 1

对集合中的标签进行排序，然后添加输入，并将它们附加回来

$('.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;">