페이지의 복잡한 계층 구조로 주문하는 방법

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- 색인?

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'); 
}); 

의