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

Answer 2

正如我在评论中所说：
您应each而不是section。

<强> jsBin demo

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 demo

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 );

  });

});

遍历集合中的每个集合（容器）以匹配甚至高度

2 个答案: