我注意到,当我将一个相对元素附加到另一个元素时,某些东西会发生变化,而后续元素总是添加到前一个元素的右边,因此似乎在附加过程中的某个时候左值发生了变化,但我不能弄清楚哪一个?

一个小例子是将5个跨度添加到div并将它们全部放在left:10和top:10上

为了使它们相互重叠,您必须从左侧取值添加的项目数量。即,一旦您添加了5个项目,则该项目的左侧为10-5 * 10

还有其他方法可以找出附加项目的左值应该是什么,以便它位于前一个值的顶部吗?

这是一些代码示例和jsfiddle link

HTML

<div id="container"></div>
<span id="el" class="drag"></span>


Java脚本

for(var i=0;i<5;i++)
{
   var element=$('#el').clone();
   $(element).html(i);
   $(element).attr("id","el"+i);

   $('#container').append(element);
   $(element).css({
        left: 10,
        top: 10,
        position: 'relative',
        marginRight: 0
    });
}
$('.drag').draggable();


更新:

我并不是在寻找“修复”,因为我想让它工作,所以我想知道一旦添加或删除了相对元素,元素中是否存在值更改

最佳答案

我不是在寻找“修复”,而是要它正常工作
  知道一次相对值后元素中是否存在值变化
  元素被追加或删除


如果您要添加另一个元素,则元素中的css不会更改。您看到的行为是由浏览器按照您要求的那样适合元素而引起的。由于'左:10;前10名;'已被占用,它会尝试将其安装在附近。也就是说,没有什么可以阻止您计算某个元素包含的元素数量。 ($('#container').children().length)或页面上元素的偏移量(实际位置; $('#el4').offset().left$('#container .drag:last-child').offset().left)。因为相对元素始终将自己相对于其他元素定位,所以这很有可能对您没有太大帮助。




  要使它们彼此重叠,您需要花费
  从左侧值添加的项目。即,一旦您添加5个项目,
  下一项的左侧为10-5 * 10
  
  还有其他方法可以找出
  附加项目应该是这样,以便它在前一个项目之上?


如果希望元素实际堆叠,则可能需要更改代码,以使其正确地彼此相邻显示,然后使用margin-left将左边框移到元素中,以便彼此重叠显示。 .draggable()将从此处计算位置,只要在使元素可拖动之后不更改DOM,就可以了。

jsfiddle示例:http://jsfiddle.net/LmW8T/2/

for(var i=0;i<80;i++)
{
    var element=$('#el').clone();
    $(element).html(i);
    $(element).attr("id","el"+i);
    //$element.addClass('element');
    $('#container').append(element);
}
$('#el').remove();
$('.drag').draggable();


使用CSS:

.drag {
    width: 40px;
    height: 40px;
    border: 1px dotted blue;
    background: #FEEFEF;

    display: block;
    float: left;
    margin-left: -25px;
}

#container {
    padding-left: 25px;
    width: 200px;
}

关于javascript - 附加相对元素时会有什么变化?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21937629/

10-09 15:36
查看更多