javascript - 查找一组 float div 的高度，就像它是单个 div 一样

Question

给定一系列 float div，如果 A-G 的高度是单个 div，则仅设置 A-G 的高度是多少？

示例位置取决于视口(viewport)的宽度 分区 A 到 G。

    <section>
        -->  [A][B][    C   ][D]
        |    [                 ]
        |    [                 ]
height--|    [        E        ] 
        |    [                 ]
        |    [                 ]
        |    [         F           ]
        -->  [G]
        ...
        [ Z ]
    </section>

所以我想可能有一个技巧可以只找到具有相同最小左侧位置的最左边的 div，然后从每个项目中检索高度。我只想选择 A - G 高度而不是 A-Z 高度。即使左侧位置不精确匹配，是否有更准确或标准的方法来执行此操作？

var gatherHeight = 0;
var sectionLeft = $("section").position().left;
$("section > div:nth-child(-n+7)").each(function() {
  if ($(this).position().left == sectionLeft)
  {
     gatherHeight += $(this).height();
  }
});

Answer 1

据我了解，jQuery 每个函数的工作方式是传递一个要循环的元素数组，如下所示，

jQuery

var height = 0;
var elements = $('.elements');

$.each(elements,function(key,value) {

   height += $(this).height();
});

纯JS

var height = 0;

var elements = document.querySelectorAll('.elements');

for(var i = 0;i < elements.length;i++) {

    height += elements[i].offsetHeight();
}

更新

HTML

<section>
    <div class="parent in-viewport">
        <div class="child">

        </div>
        <div class="child">

        </div>
        <div class="child">

        </div>
    </div>
    <div class="parent out-viewport">
        <div class="child">

        </div>
        <div class="child">

        </div>
        <div class="child">

        </div>
    </div>
</section>

jQuery

var height = 0;
var parents = $('.in-viewport');

$.each(parents,function(key,value) {

   height += $(this).height();
});