확장/축소 섹션의 오프셋 좌표 표시

Question

내 웹 페이지에 expand/collapse 섹션이 있습니다. 펼치기/접기는 section이 아닌 div/table을 사용하여 완료됩니다.

<section id="examples"> 
    <text id = "ui-examples"> 
     <p class="the-data">Of course you can add other text before, after, and around the elements described in the previous section.</p> 
    </text> 
</section> 

페이지를로드에 the-data의 많은 경우가 발생하므로 ui-examples 다른 ID와 the-data 해당로드됩니다 : 내 코드입니다. text의 offset 좌표를 계산하는 방법이 다른 text ids을 어떻게 얻을 수 있습니까?

편집 서식

Answer 1

나는 이런 식으로 뭔가 할 것 :

html로

<section class="examples"> 
    <text class="ui-examples"> 
     <p class="the-data">Of course you can add other text before, after, and around the elements described in the previous section.</p> 
    </text> 
</section> 

그리고 jQuery를

$(document).ready(function() { 
    $('.examples').each(function() { 
     var theData = $(this).find('.the-data'); 
     console.log(theData.offset().left); 
     console.log(theData.offset().top); 
    }); 
}); 

을

이 문서는 준비가 완료되기를 기다리고 있습니다. 일단 루프 내에 "example"클래스가있는 각 div를 반복하면 find jQuery 함수를 사용하여 현재 div의 모든 하위 항목을 검색합니다 이 경우 선택기와 일치하는 것은 .example의 인스턴스입니다. 따라서 .the-data을 사용하면 찾고있는 단락 태그를 찾을 수 있습니다.

그러면 offset()을 사용하여 좌표를 얻을 수 있습니다.