부모 부모 div에 대한 div 위치

Question

다음 html 구조가 있습니다. 아래의 id에서 "abcd"및 "efgh"를 ​​생성하고 고유 ID를 부여하기 위해 임의의 문자열로 추가하십시오.

<div id="MainCanvas"> 
    <div id="canvas-1"> 
     <div id="MainDiv-abcd"> 
      <div id="Manvas-abcd"> 
      </div> 
      <div id="Textdiv-abcd"> 
      </div> 
     </div> 
     <div id="MainDiv-efgh"> 
      <div id="Manvas-efgh"> 
      </div> 
      <div id="Textdiv-efgh"> 
      </div> 
     </div> 
     ...there are more of the main Divs. 
    </div> 
    <div id="canvas-2"> 
    ....same structure as above. 
    </div>  
</div> 

나의 최종 목표는 모든 범위를 반복하고 범위에 관한 정보를 얻는 것입니다.

내 코드는 다음과 같습니다. 논리

Answer 1

당신은 부모의 오프셋 (offset) 왼쪽 상단을 얻고 다음의 위치를 ​​취득하고자하는 아이의 오프셋 (offset) 왼쪽 상단을 뺄 수의 변화에 ​​열기

var counter = 1; 
$('[id^="MainDiv-"]').each(function(i) { 
     var spanId = this.id.replace("MainDiv-", "TextDiv-"); 
     if ($("#" + spanId).length) { 
      if ($("#" + spanId).text().trim().length) { 
       //here I get the canvas number which is a page in the application 
       myPages[counter] = $(this).parent().attr("id").split("-")[1]; 
       //this is where I need to get the left and top position of the span 
       //relative to the canvas 
       counter = counter + 1; 
      } 
     } 
    }); 

. 이 같은

뭔가 :

var parent = $("#canvas"), 
    child = $("#myspan"), 
    parentTop = parent.offset().top, 
    parentLeft = parent.offset().left, 
    childTop = parent.offset().top, 
    childLeft = parent.offset().left, 
    childPosTop = parentTop - childTop, 
    childPosLeft = parentLeft - childLeft; 

childPosTop이 canvas 및 childPosLeft에 상대 오프셋 자녀의 상단을 포함해야한다는 왼쪽 canvas에 상대 오프셋 포함해야합니다.

Answer 2

DOM 노드는 및 y의 두 키를 포함하는 객체 인 속성이 offsetParent입니다.

자바 스크립트를 사용 :

var mainPosition = document.getElementById("MainDiv").offsetParent; 
alert(mainPosition.left + ", " + mainPosition.top); 

을하지만, JQuery와 덜 코드 - 더 - 팽창 방식으로이 기능을 할 수있는 래퍼가 있습니다

var mainPosition = $("#MainDiv").position(); 
alert(mainPosition.left + ", " + mainPosition.top);