Cách đặt vị trí div phụ thuộc vào vị trí div khác?

Question

Đây là phần html của mã:

<div class="snake"> 
    <div class="body"></div> 
</div> 

Hàm dưới đây có khối cuối cùng, loại bỏ nó và tạo ra một số khác để đặt nó ở đầu trang.

//The snake turns right 
var turnRight = function() { 
    blocks_moved++; 
    $('.snake').children().last().remove(); 
    $('<div></div>').addClass('body').prependTo('.snake').css('top', 0 + '%').css('left', xPos * blocks_moved * 1.2 + '%'); 
    $('.snake').children().removeClass('head'); 
    $('.snake').children().first().addClass('head'); 
...more code 

Với mã bên dưới, tôi cố gắng đặt vị trí con rắn vào vị trí của đầu để mỗi khối mới trở thành đầu con rắn di chuyển một khối.

//Set the snake position equal to head's position 
var headPos = $('.snake').children().first().position(); 
    $('.snake').position(headPos); 

     if (blocks_moved === length) { 
      blocks_moved === 0; 
     } 
    } 

Khi tôi gọi hàm turnRight(); việc nghỉ đầu và di chuyển cơ thể nhưng rắn tại chỗ. Tôi cũng đã thử với phương pháp .css() nhưng tôi đã không thành công. Có cách nào khác để làm điều này không?

Tôi đã giải quyết vấn đề này với .offset() và định vị. Dưới đây là ví dụ trực tiếp: https://jsfiddle.net/dusth7gc/3/

Answer 1

giải quyết vấn đề này với .offset() và định vị.

var turnRight = function() { 

    $('.body').css('background-color', 'gray'); 

    headPos_x = ($('.head').offset().left/$(window).width() * 100); 
    headPos_y = ($('.head').offset().top/$(window).height() * 100); 

    $('<div></div>').addClass('body').prependTo('.snake').css('top', headPos_y + '%').css('left', headPos_x + helper_width * 1.2 + '%'); 

      $('.snake').children().last().remove(); 
      $('.snake').children().removeClass('head'); 
      $('.snake').children().first().addClass('head'); 



      $('.helper').css('top', $('.head').offset().top + 'px').css('left',$('.head').offset().left + 'px'); 

     if(collision($('.helper'), $('.meal')) === true) { 
      $('.meal').remove(); 
      $('<div></div>').addClass('body').css('background-color', 'transparent').appendTo('.snake'); 
      foodCreate(); 
     } 
} 

Đây là ví dụ trực tiếp: https://jsfiddle.net/dusth7gc/3/.