0

有点奇怪，我似乎找不到可行的答案；可能会很简单！

我有一些流氓li项目，我正在使用 jquery 将它们包装在ul's 中，然后绝对定位，但它们都处于相同的位置（彼此重叠）。

我需要做的是使用更多的 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）？

4

3 回答 3

1

我建议将整个 UL 组包装在一个父元素（例如 div）中，给出 wrapperposition: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'); 
});

我可能会这样做。

于 2012-10-11T15:52:00.183 回答
0

尝试这个 ：

$("ul.end").each(function() {
    $(this).css({
        top : '+=30px'
    });
});
于 2012-10-11T15:51:57.270 回答
-1

您将不需要 jQuery 来实现这一点.. 只需为这些元素分配一个类

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

所以给出一个top:"30px" and position:"absolute"会使它们相互重叠

尝试 position:"relative"改用

于 2012-10-11T15:46:20.537 回答