Question

有点奇怪的我似乎无法找到可行的答案;可能会非常简单！

我有一些流氓li项目，我正在使用jquery来包裹ul然后绝对定位，但它们都处于相同位置（彼此叠加）。

我需要做的是使用更多jquery来增加每个ul项，如下所示：

<ul class="end"><li>Some text</li></ul> (top:30px;)
<ul class="end"><li>Some text</li></ul> (top:30px; - needs to be 60px)
<ul class="end"><li>Some text</li></ul> (top:30px; - needs to be 90px)

依此类推。现在我通常会使用css类来执行此操作，但这些项目是动态生成的，我不需要很多css类，因为数量可能会更改/增加。

我如何使用jquery进行此工作（在此实例中无法使用position:relative;或float）？

Answer 1

我建议将整个UL组包装在父元素（例如div）中，给出包装器position:absolute，并给予UL自己position:relative。这是最强大且与浏览器兼容的解决方案，在这种情况下这是最常见的事情。事实上，我自己也做过。

<div class="wrap">
    <ul class="end"><li>Some text</li></ul>
    <ul class="end"><li>Some text</li></ul>
    <ul class="end"><li>Some text</li></ul>
</div>

<style type="text/css">
    .wrap { position:absolute; top:30px; }
    .end { position:relative; }
</style>

如果出于某些原因对您不起作用，您可以使用jQuery迭代UL：

var currentHeight = 30;
$('ul.end').each(function() {
    $(this).css('top', currentHeight);
    currentHeight += $(this).height();
});

编辑：

很高兴以上帮助！只是为了记录，jQuery还可以从页面流中提取元素并将它们移动到包装元素中。即使它们属于其他元素，这也应该有效。

$('ul.end').each(function() { 
    $(this).appendTo('.wrap'); 
});

我可能会这样做。

Answer 2

试试这个：

$("ul.end").each(function() {
    $(this).css({
        top : '+=30px'
    });
});

Answer 3

你不需要jQuery来实现这一点。只需为这些元素分配一个类

如果您已定义位置：绝对并且它们似乎重叠，那么这是默认功能。当您将元素指定为绝对时，它不在文档流程中并指向视口...

所以给top:"30px" and position:"absolute"会使它们彼此重叠

尝试使用position:"relative"代替

jQuery绝对定位ul项增量位置

3 个答案:

编辑：