javascript - jQuery - 不确定如何在使用 .each 时重置数组的最大值

Question

此处提供完整上下文:http://jsfiddle.net/dweiliu/bcHsy/1/

我目前有 2 个部分，其中两个部分都有 2 个表格，它们嵌套在自己的文章中，如下所示:

<section>
    <article>
        <h2/>
        <table>...</table>
    </article>
    <article>
        <h2/>
        <table>...</table>
    </article>
</section>
<section>
    <article>
        <h2/>
        <table>...</table>
    </article>
    <article>
        <h2/>
        <table>...</table>
    </article>
</section>

我需要这种行为来处理每个部分 3 篇文章等...

$('section').each(function(){
    var heights = [];
    $('article').each(function(){
        heights.push($(this).find('table tr').length);
    });
    maxHeight = Math.max.apply(Math, heights);
    calculatedHeight = maxHeight * 35 + 35;
    $('article').css('height',calculatedHeight);
});

我希望能够浏览每个部分，查看该部分中的表格，找到最长的表格(“table tr”)。长度并根据该长度计算高度。

现在，代码只遍历整个页面，并且在完成任何给定部分后不会重置数组高度的最大值。我知道我错过了一些东西。有人能指出我正确的方向吗？

Answer 1

我假设您的文章位于部分内。如果是这样，您需要在每个部分的上下文中选择您的文章:

$('section').each(function(){
    var heights = [];
    $('article', this).each(function(){
        heights.push($(this).find('table tr').length);
    });
    maxHeight = Math.max.apply(Math, heights);
    calculatedHeight = maxHeight * 35 + 35;
    $('article', this).css('height',calculatedHeight);
});

差异可能可以忽略不计，但您可能会看到这种替代方案是否更快:

$('section').each(function(){
    var max = 0;
    $('article', this).each(function(){
        max = Math.max(max, $(this).find('table tr').length);
    });
    var calculatedHeight = max * 35 + 35;
    $('article', this).css('height',calculatedHeight);
});