Come impostare una posizione div a seconda di un'altra posizione div?

Question

Questa è la parte html del codice:

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

La funzione qui sotto prende l'ultimo blocco, lo rimuove e crea un altro per mettere in cima.

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

Con il codice sotto ho cercato di impostare la posizione di serpente eqal alla posizione di testa in modo che ogni volta che un nuovo blocco diventa testa il serpente si muove di un blocco.

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

Quando chiamo la funzione turnRight(); i soggiorni di testa e muovere il corpo, ma di serpenti in luogo. Ho anche provato con il metodo .css() ma non ci sono riuscito. Qualche altro modo per farlo?

Ho risolto questo problema con .offset() e il posizionamento. Ecco un esempio: https://jsfiddle.net/dusth7gc/3/

Answer 1

risolto questo problema con .Offset() e posizionamento.

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

Ecco un esempio: https://jsfiddle.net/dusth7gc/3/.