javascript - 遍历集合的每个集合(容器)以匹配甚至它们的高度

Question

我的页面包含多个部分，每个部分中都有分布在列中的元素。每个部分的列数取决于。

<header>this is my page header</header>
<section>
    <div class="columns three">
        <article>first article, with image title and excerpt</article>
        <article>second article, with image title and excerpt</article>
        <article>third article, with image title and excerpt</article>
    </div>
</section>
<section>
    <div class="columns five">
        <article>first article, with image title and excerpt</article>
        <article>second article, with image title and excerpt</article>
        <article>third article, with image title and excerpt</article>
        <article>fourth article, with image title and excerpt</article>
        <article>fifth article, with image title and excerpt</article>
    </div>
</section>
<section>
    <div class="columns four">
        <article>first article, with image title and excerpt</article>
        <article>second article, with image title and excerpt</article>
        <article>third article, with image title and excerpt</article>
        <article>fourth article, with image title and excerpt</article>
    </div>
</section>

我想要的是一个 jQuery 函数，它将遍历每个 SECTION 并匹配该部分中其文章子项的高度。我设法在整个页面上做到这一点，但我无法设法只在每个组中做到这一点。

var hEqualize = 0;
jQuery('section article').each(function() {
    hEqualize = jQuery(this).height() > hEqualize ? jQuery(this).height() : hEqualize;
}).height(hEqualize);

让我知道我可以做些什么调整，因为我根本不熟悉 JS 和 jQuery。

Answer 1

您可以将其分成两个循环。一节。另一个用于该部分中的文章。

var hEqualize = 0;
$('section').each(function () {
    hEqualize = 0;
    $(this).find('article').each(function () {
        hEqualize = jQuery(this).height() > hEqualize ? jQuery(this).height() : hEqualize;
    }).height(hEqualize);
    console.log(hEqualize);
});

参见 jsFiddle here