2016-11-15 143 views
1

我在這裏有一些計算機生成的文本,需要使用javascript進行排序。對包含html對象的數組按其內部html文本進行排序

我複製了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中沒有編輯,因爲它純粹是由計算機生成的,我無法繞過它。

+0

1)複選框,沒有任何的innerHTML,2)你的比較功能沒有定義 ,3)你的數組有複選框和標籤。你到底在做什麼? –

+0

你的'compare'函數在哪裏聲明? – jonathanGB

回答

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

+0

感謝它的工作!你可以迭代它,以便每個輸入和標籤後有一個
?我試圖將
放入地圖的每個第二個元素中,但它不起作用! – Fenrir

+1

@Fenrir - 補充說,以及 – adeneo

+0

wtf youre如此之快!我實際上正在等待,直到我可以編輯評論來更詳細地描述問題,我已經使用過的演示:http://jsfiddle.net/4pmvE/65/ – Fenrir

相關問題