遍历一个集合的每个集合（容器）以匹配它们甚至达到其高度

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

Answer 2

正如我在评论中所说：
您应该each在您的section 。

jsBin演示

jQuery(function($) { // DOM ready and Free to use $ now :)

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

});  

或者甚至可以简化一下jQuery代码：

jsBin演示

jQuery(function($) { // DOM ready and Free to use $ now :)

  $('section').each(function() {

    var hEQ = 0;
    $(this).find("article").height(function(i, v){
      hEQ = v>hEQ ? v : hEQ;
    }).height( hEQ );

  });

});