获取高度值，并将多个不同高度的元素定位在中心

Question

我正在创建一个新闻页面，该文章位于覆盖框中的图像上方。我有多个新闻项目带来印刷在一页，这是与学生工作。

我对定心感兴趣的是图标题。

        <section>
            <h2>{title}</h2>
            <figure>
                <img src="{news_image}" alt="{title}" width="718" />
                <figcaption>
                    {article}
                    <a href="#close" class="btn-close">X</a>
                </figcaption>
            </figure>
        </section> 
        <section>
            <h2>{title}</h2>
            <figure>
                <img src="{news_image}" alt="{title}" width="718" />
                <figcaption>
                    {article}
                    <a href="#close" class="btn-close">X</a>
                </figcaption>
            </figure>
        </section> e.t.c

我想要得到图像中每个图像的高度以及每个图像标题的高度，以便我可以将其完美地置于图像之上。

对于一个元素，我可以想象它是相当容易的，但我的困惑是如何让Jquery为每个元素添加正确的值。

任何想法?

Answer 1

您应该能够简单地通过遍历每个部分来做到这一点:

$('section').each(function(){
    var imgHeight = $(this).find('img').height();
    var captionHeight = $(this).find('figcaption').height();
    {position caption here}
});

这应该允许您获取每个图像的高度和每个部分的每个标题。

jsFiddle here: http://jsfiddle.net/nQCUr/1/