在resize上添加嵌套每个循环中的值之和

Question

我正在构建一个由一系列部分组成的横向网站，这些部分在绝对定位的 WIDE 包装中彼此相邻。请参见下图：

我需要遍历每个部分的内容，添加其内容的宽度，并设置每个部分的宽度（因此它的内容可以水平放置）。然后我想循环遍历每个部分并添加每个部分宽度，并设置包装器的宽度（因此所有部分都适合。）

如果查看图表，目标很简单 - 总结每个部分的内容，设置部分宽度。然后总结截面宽度，并设置包装宽度。

以下是我的代码。在页面加载上运行类似的脚本，效果很好。对于resize事件，这是 JUST 。

function adjustPanels(){
    var sections = $("section"), count = sections.length;

    sections.each(function(){

        var totalWidth = 0,
        select = $(this).find('.mainScroll div, .mainScroll img');

        //we loop through all content within a section and sum it's widths
        select.each(function(index) {
            totalWidth += parseInt($(this).outerWidth(true), 10);
        });

        //here we add up all of the section widths so we can set a master width for the container
        sunWidth += parseInt(totalWidth, 10);

        //we set the width of each section
        $(this).css({ 'width' : totalWidth});

        //now we set the width of the container if we are done iterating (callback)
        if (!--count){
            $("#sectionWrap").css({'width' : sunWidth});
        }  
    });
}

$(window).resize(adjustPanels);

这不能正常工作。似乎导致问题的一行是sunWidth += parseInt(totalWidth, 10);这似乎是以指数方式将这些数字相加，因此容器的FAR太宽。各个部分似乎具有正确的宽度，但总数不正确。知道如何解决这个问题吗？

Answer 1

在函数顶部将sunWidth设置为零可以修复此问题：

function adjustPanels(){
    var sunWidth = 0, sections = $("section"), count = sections.length;

    sections.each(function(){

        var totalWidth = 0,
        select = $(this).find('.mainScroll div, .mainScroll img');

        select.each(function(index) {
           totalWidth += parseInt($(this).outerWidth(true), 10);    
        });

        $(this).css({ 'width' : totalWidth});
        sunWidth += parseInt(totalWidth, 10);

        if (!--count){
             $("#sectionWrap").css({'width' : sunWidth});
        }

    });
}