Question

让我们有以下HTML结构：

<div class="items">
  <div class="item" style="position: absolute; left: Apx; top: Bpx;">...</div>
  ...
</div>

我在这个页面上也使用了无尽的分页，所以当我点击“加载更多”按钮时，则调用这个JS动作：

$（'。items'）。append（...“.item”中的新数据divs ...）;

数据已加载，但它们显示在 .items div =＆gt;的顶部。 “旧”数据（ .item divs）与新的数据重叠。当然，我想在以前的 .item div中再次显示新数据（ position：absolute; ），但是怎么做？< / p>

谢谢

Answer 1

由于您要动态追加新的div，您可以动态设置它们的顶部偏移量，如下所示：

var topValue = $('.items').position().top + $('.items').outerHeight(true) + 'px';
var newDiv = ... // Populate your new div, setting the "top: Bpx" value to topValue
$('.items').append(newDiv);

Answer 2

如果我理解正确，那么我建议您将.items div设为绝对定位的部分，同时使.item元素相对定位在其中。这可以帮助他们在保持位置时添加更多内容时正确堆叠。

另一个选择是在这些元素周围添加一个div来对齐它们。

jQuery - 如何将新数据附加到一个装满“position：absolute”的div的div中

2 个答案: