对包含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;">