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