jquery - 根据行数计算元素的高度

Question

我有一个元素，其高度是根据其内容计算的(ul)。目前，ul 有两行，每行包含三个项目。我使用以下 CSS 设置 .element 在屏幕上的位置；

.element {
position: absolute;
left: 30px;
top: -139px;
}

此标记为

<div class="element">
    <ul>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
    </ul>
</div>

将来需要向 ul 添加第三行，这意味着我使用的 top 定位将隐藏这个新行(作为元素 div位于另一个 div 之上)，这远非理想。

我认为我需要使用 jQuery 来完成此操作，因此无论添加多少行，我都不需要更改 CSS 来解决此问题。

到目前为止我所拥有的 WIP jQuery 看起来像:

var elemImgHeight = $('.element li img').height();
var toggles = $('.element li');
var numOfRows = math.ceil( toggles.length() / 3 );
var elemTopOffset = numOfRows * elemImgHeight + 10;

    if ($('.element li') => 7) {
        $('.element').css({ top:elemTopOffset })
    }

我不确定我是否走在正确的轨道上，所以可以提供一些指导吗？

提前致谢。

Answer 1

简单...假设您有以下 html 结构:

<div class="element">
    <ul>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
    </ul>
</div>​​​​​​​

并且您想要计算顶部位置，以便仅显示最后一个 li 元素... 使用这个:

var theElement = $(".element");
var topPosition = theElement.find("ul li:last").outerHeight()-theElement.outerHeight();
theElement.css("top",topPosition);

示例位于此处:http://jsfiddle.net/senegalo/eEya4/2/