在 JQUERY 中使用嵌套 each() 计算累积内容高度答案

【问题标题】：Using nested each() in JQUERY to Calculate Cumulative Content Height在 JQUERY 中使用嵌套 each() 计算累积内容高度
【发布时间】：2013-01-13 18:22:56
【问题描述】：

我正在尝试制定一个调整大小的函数来增加 div 容器的高度（在每种情况下，这里都是“div.cell”），如果屏幕被挤压得太多以至于内容溢出。每个 div.cell 都有一堆不同的 p。这里只有 2 个。

    <div class="cell panel">
        <img src="stills/press/press-logo-c2e2.png" class="general"><p class="one">Panelist - Chicago Comic & Entertainment Expo</p>
        <p class="two">[Panel Name Here]</p>
        <p class="three"><b>Panel Date/Location:</b> [Time]PM on April 26-28, 2013 at C2E2 (Chicago, Illinois)</p>
        <p class="three"><b>Panelists:</b> [Panelists]</p>
        <p class="three"><b>Panel Blurb:</b> "[Blurb]"</p>
    </div>

    <div class="cell panel">
        <img src="stills/press/press-logo-wondercon-anaheim.png" class="general"><p class="one">Panelist - WonderCon</p>
        <p class="two">[Panel Name Here]</p>
        <p class="three"><b>Panel Date/Location:</b> [Time]PM on March 29-31, 2013 at WonderCon (Anaheim, California)</p>
        <p class="three"><b>Panelists:</b> [Panelists]</p>
        <p class="three"><b>Panel Blurb:</b> "[Blurb]"</p>
    </div>

在超级简陋，而且非常错误的jquery中，我是希望通过嵌套来做到这一点的，比如：

var pheight = 0;
var divheight = 0;
var biggest = 0;
$("div.cell").each(function (){
    divheight=$(this).height();
    pheight = 0;
    $("p").each(function (){
        pheight += $(this).height();
    });
    biggest = divheight;
    if (pheight > biggest) { biggest = pheight };
    $(this).css("height",biggest);
})

这不起作用 :) 任何人都知道如何将每个 div.cell 更改为其 p 的累积高度（加上缓冲区）

【问题讨论】：

你能给我们看一个它不工作的例子吗？对我来说似乎有效
应该可能将您的var 移动到each 中，以便它们在每次通过时重置，尽管我认为不会有问题

标签： jquery html height each cumulative-sum

【解决方案1】：

试试这个：

$(window).resize(function(){
    //your script here
});

它会将你的函数绑定到窗口调整大小事件，但我认为你的函数不能正常工作，它只会增加高度，而不会减少它。 ps：对不起，我不能发表评论。

【讨论】：

【解决方案2】：

我不确定你到底想要什么。但是你可以试试这段代码：

var pheight = 0;
var divheight = 0;
var biggest = 0;
$(window).resize(function () {
    $("div.cell").each(function () {
        //divheight=$(this).height();
        pheight = 0;
        $(this).find("p,img").each(function () {
            pheight += $(this).height();
        });
        biggest = pheight;
        //if (pheight > biggest) { biggest = pheight };
        $(this).css("height", biggest);
    });
});

这里是 jsfiddle。 http://jsfiddle.net/agAm8/

【讨论】：

【解决方案3】：

根据您的要求，也许这会有所帮助：

var pheight = 0;
var divheight = 0;
var biggest = 0;
$("div.cell").each(function () {
    divheight = $(this).height();
    pheight = 0;
    $(this).children("p").each(function () {
        pheight += $(this).height();
    });
    biggest = divheight;
    if (pheight > biggest) {
        biggest = pheight;
    }
    $(this).css("height", biggest);
});

在这里查看：http://jsfiddle.net/RLWqV/

【讨论】：