Javascript 像查找单个div一样查找一组浮动div的高度

如果选择了浮动div，那么如果a-G的高度是单个div，那么仅设置a-G的高度是多少

示例位置取决于视口的宽度 A区至G区

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

---

据我所知，jQuery每个函数的工作方式是传递一个元素数组，这些元素作为参数循环，如下所示

jQuery

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

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

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

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

$.each(parents,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();
}

---

是的，我看到了，但我实际上需要得到的不是所有元素的高度。只有左边的。比如，如果它们是浮动div，那么当你调整一组浮动div的宽度时，height thingy会改变吗？为什么不给相关元素（a到G）一个css类呢？这样，您只需执行

$（'.myClass'）

选择所有选项，然后使用每个选项对它们进行迭代？我同意@shxfree，您使用的选择器非常慢，而且您注意到很难使用，相反，将一个类应用于需要选择的元素，并使用jQuery选择该类并对其进行迭代。高度不能等于该范围内各个元素高度的总和。它必须等于整个集合的高度，就好像它只是一个大div。明白吗？你使用的是网格系统吗？如果是，则计算行的高度，而不是列的高度。如果不使用栅格系统，请在父图元中每四个图元包裹一次，然后选择父图元并计算父图元的高度，因为其高度将基于其中最高的图元。我将拼凑出几行代码，并将它们放在我的答案中。

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

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

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

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