javascript - 如何设置一个 div 位置依赖于另一个 div 位置？

Question

这是代码的html部分:

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

下面的函数获取最后一个 block ，将其删除并创建另一个 block 以将其放在顶部。

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

通过下面的代码，我尝试将蛇的位置设置为头部的位置，这样每当一个新方 block 成为头部时，蛇就会移动一个方 block 。

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

当我调用函数 turnRight(); 时，头部和 body 移动但蛇留在原地。我也尝试过 .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/ .