別のdiv位置に依存するようにdiv位置を設定するにはどうすればよいですか？

Question

これは、コードのHTML部分である：

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

以下の関数は、最後のブロックを取り、それを削除し、先頭にそれを置くために別のものを作成します。私は頭の位置に新しいブロックが先頭に一つのブロックによってヘビの動きとなってたびにヘビ位置EQALを設定しようとした下のコードで

//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 

。私は頭と体の動きが、蛇が所定の位置にとどまる機能turnRight();を呼び出す

//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; 
     } 
    } 

。私も.css()メソッドで試しましたが、成功しませんでした。これを行う他の方法はありますか？

私はこの問題を.offset（）と位置付けで解決しました。ここに生きている例があります：https://jsfiddle.net/dusth7gc/3/

Answer 1

は、この問題を.offset（）と位置付けで解決しました。

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

ここにはライブの例があります。https://jsfiddle.net/dusth7gc/3/です。