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