javascript - 添加元素的高度

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