如何在頁面中通過簡單層次結構排序列表項目

Question

我收到了指向控件的鏈接列表（錯誤消息）。 鏈接的順序與指向的控件的順序不同。 我想重新排序我的鏈接。

樣本：

$(function() { 
 
    //reorder errorList, 
 
    // getOrder(idcontrol){???} 
 
});

input, select,a { 
 
    display:table; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h3>The original list or errors.</h3> 
 
<div id="errorList"> 
 
     <a data-idcontrol="textbox2">error textbox2</a> 
 
     <a data-idcontrol="list3">error list3</a> 
 
     <a data-idcontrol="textbox1">error textbox1</a> 
 
     <a data-idcontrol="textbox2">error textbox2</a> 
 
     <a data-idcontrol="list1">error list1</a> 
 
    </div> 
 

 
<h3>Elements in the page</h3> 
 
    <input type="text" id="textbox1"/> 
 
    <input type="text" id="textbox2"/> 
 
    <select id="list1"><option>item1</option></select> 
 
    <input type="text" id="textbox3"/> 
 
    <select id="list2"><option>item1</option></select> 
 
    <select id="list3"><option>item1</option></select> 
 

 

 
<h3>What should be the list of errors after been reordered.</h3> 
 
<div id="errorListShouldBeAfterReorderOnLoad"> 
 
     <a data-idcontrol="textbox1">error textbox1</a> 
 
      <a data-idcontrol="textbox2">error textbox2</a> 
 
      <a data-idcontrol="textbox2">error textbox2</a> 
 
      <a data-idcontrol="list1">error list1</a> 
 
      <a data-idcontrol="list3">error list3</a> 
 
    </div>

Answer 1

您可以根據它屬於

$('#errorList a').sort(function(a,b) { 
    var data1 = $(a).data('idcontrol'), 
     data2 = $(b).data('idcontrol'), 
     index1 = $('#' + data1).index(), 
     index2 = $('#' + data2).index(); 

    return index1 - index2; 
}).appendTo('#errorList');