javascript - 如何基于前任者动态向下移动DIV

我有一系列DIV，它们都具有相同的类（.ms-acal-item）。我想做的是获取每个位置，将其与上方的位置进行比较，并在需要时向下移动。这是为了纠正事件图块重叠的SharePoint 2013日历上的问题。到目前为止，这是我的代码：

$(function() {

   $('.ms-acal-item').each(function(i, obj) {
    var tile = jQuery(this);
    var prev = tile.prev();
    var prevPos = prev.position();
    var tilePOs = tile.position();
    var curTop = parseInt(tilePos.top);
    var newTop = parseInt(prevPos.top) + 30;
    if(curtop !== newTop){
    tile.css('top', newTop);
    }
   });

});

以下是SharePoint生成的内容的示例：


每个图块高20像素，并且绝对位于同一行。我需要做的是将每个图块的位置与其前身进行比较，然后将其向下移动30px（如果尚不存在）（图块20px，它们之间的10px）。到目前为止，它不起作用-我的代码似乎对磁贴位置没有影响。

我究竟做错了什么？

最佳答案

逻辑上存在问题，在处理第一个元素时，我们没有任何先前的元素，因此我们需要忽略它，并且在您的代码中很少出现拼写错误（大小写可变）。下面是改版代码。（要查看更改效果，我将样式从顶部更改为左边距，然后进行更正）

$(function() {
   $('.ms-acal-item').each(function(i, obj) {
    var tile = $(this);
    var prev = tile.prev();
    if (typeof prev.position() !== "undefined") {
        var prevPos = JSON.parse(JSON.stringify(prev.position()));
        var tilePos = JSON.parse(JSON.stringify(tile.position()));
        var curTop = parseInt(tilePos.top);
        var newTop = parseInt(prevPos.top) + 30;
        if(curTop !== newTop){
        tile.css('margin-left', newTop);
        }
    }
   });

});