div에서 div 거리를 얻으십시오.

Question

위에서 div 거리를 얻으려고합니다. 나는 쉽게 들리지만 당신을 설명하게 할 것입니다.

동일한 클래스의 div가 여러 개 있는데 .item 모두가 맨 위로부터 같은 거리에있는 것은 아닙니다. 그래서, 나는 그들이 동일한 클래스를 공유하기 때문에 클릭 된 요소가 더 아래 인 경우에도,

var $distanceItem = $('.item').position().top; 
alert($distanceItem); 

는 분명히 같은 값을 반환 뭔가를하려고 할 때.

내가 클릭하는 요소의 상단에서 거리를 얻을 수 있는지 알고 싶습니다. id's을 사용할 수 없다고 말해야합니다.

많은 감사

Answer 1

클릭 한 요소가 jQuery의 클릭 이벤트 콜백 함수에 this 변수에 바인딩, 그래서 $(this).offset().top; 당신에게 정상에서의 위치를 ​​제공 할 것입니다. 이 데모를 참조하십시오

$('body').on('click', '.item', function(e){ 
 
    var positionFromTop = $(this).offset().top; 
 
    $('#result').html('Clicked div position from top: ' + positionFromTop + 'px'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="result"></div> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <div class="item">Item 4</div> 
 
    <div class="item">Item 5</div> 
 
    <div class="item">Item 6</div> 
 
    <div class="item">Item 7</div> 
 
</div>

Answer 2

글쎄, 같은 클래스와 1 명 이상의 div가 있기 때문에, jQuery의 .position() 함수는 클래스 최초의 사업부를 소요하고 '위치를 반환합니다. 그 이유는 당신이 동일한 가치를 얻는 이유입니다.

// when any div that has the class="item" is clicked, call the same function 
$(".item").click(function() { 
    // same function is called for every click, but the magic behind ``this`` is that 
    // in the click event callback, it changes to the item that was clicked on 

    var $distanceItem = $(this).position().top; 
    alert($distanceItem); 
});