如何通過複雜的層次結構在頁面中訂購

Question

我發佈了一個問題（How to order list items by simple hierarchy in page）;答案回答了這個問題，但僅僅是因爲我的樣本不夠複雜。

我需要找到一個元素的索引相比，非常高的父母或可能是整個頁面。可能是與整個dom相比的索引。

的代碼有沒有工作，因爲指數（）始終返回0（如果控制不在同一父） https://jsfiddle.net/6ztqckqa/3/

$(function() { 
    //reorder errorList, 
    $('#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'); 
}); 

HTML：

<h3>The original list or errors.</h3> 
<div id="errorListOriginal"> 
    <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>The list or errors reordered.</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>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> 

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

是否有使用方法z-index的？

Answer 1

至少有一些嵌套div應該有類，表明它們的用途。同一個類的元素應該在DOM樹中的同一級別，以便您可以選擇它們並獲取它們的索引。

否則，將類或ID應用於頂級父級並將其作爲其子級。

底線是乾淨的語義標記是關鍵。

Answer 2

我用蠻力基礎上Is element before or after another element in DOM

這裏小提琴http://jsfiddle.net/6ztqckqa/5

$(function() { 
    //reorder errorList, 
    $('#errorList a').sort(function(a, b) { 
    var data1 = $(a).data('idcontrol'), 
     data2 = $(b).data('idcontrol'); 

      var all = $('input, select'); 

      var index1 = all.index($("#" + data1)); 
      var index2 = all.index($("#" + data2)); 

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