Question

我循环浏览所有高度不同且绝对定位的列表项。我希望每个li在Y轴上看起来比前一个li低。

我坚持如何添加所有以前的prev_height变量。第三个li Y坐标是前两个li的高度之和。

 $("li").each(function(){
    the_height=$(this).height();
    prev_height = $(this).prev().height();

    $(this).css({"left" : prev_height * 1, "top" : prev_height});
    console.log('prev height: '+prev_height);
 });

HTML

 <ul class="origin_left" style="top:100px; left:100px;">
    <li>Bus Stop Serves as Social Meeting Point Made of Giant Letters</li>
    <li style="top:; left:;">The organization builds communities by bringing together artists and audiences from diverse backgrounds to engage in the creative process. In a series of streetscape design workshops, hosted by Creative Alliance and Southeast CDC, residents of Highlandtown expressed a desire for an interactive bus stop that made a statement for the Highlandtown Arts & Entertainment District.</li>
    <li style="top:; left:;"><img src="image.jpg" alt="" /></li>
    <li style="top:; left:;">In response, Creative Alliance teamed up with Spanish collaborative mmmm….as part of the initiative TRANSIT&mdash;Creative Placemaking with Europe in Baltimore. With the help of local sculptors, they created BUS.</li>
    <li style="top:; left:;"><img src="image.jpg" alt="" /></li>
 </ul>

Answer 1

以下是如何做到这一点。

var y = 0;

$("li").each(function() {
    $(this).css({
        "top": y
    });
    y += $(this).outerHeight();
});

<强> See Working Demo

<强> See Complete Code

Answer 2

您将使用在循环外初始化的变量：

var y = 0;
$("li").each(function(){
  $(this).css({ left: y, top: y });
  y += $(this).height();
});

我不确定您是否要将left样式设置为与top样式相同，但我将其保留在原始代码中。

Answer 3

也许这会有所帮助：

var ht = 0; // change if needed;
$('.origin_left>li').each(function(){
  var e = $(this);  
  e.css('top', ht); ht += e.outerHeight(true);
});

添加元素的高度

3 个答案: