Question

我认为这是一个非常简单的问题，但是......

var outerHeight = $('.profile').outerHeight();
$("#total-height").text(outerHeight + 'px');

现在var outerHeight只给出了具有类.profile的第一个元素的outerHeight。

如何使用班级.profile获取所有元素的outerHeights的总和？

Answer 1

遍历每个匹配元素并加上外部高度：

var outerHeight = 0;
$('.profile').each(function() {
  outerHeight += $(this).outerHeight();
});
$("#total-height").text(outerHeight + 'px');

Answer 2

这是直截了当的解决方案。只需循环遍历jQuery对象的元素，总结outerHeight() s。

var total = 0;
$('.profile').each(function(){
    total += $(this).outerHeight();
});
// total is good here

重要的是所有jQuery getter只返回jQuery集中第一个元素的值，但你可以自己添加它们。

这是一个迂回但很酷的做法http://jsfiddle.net/mendesjuan/bKtAn/6/

// You can use a jQuery object as the `this` param in `Array.prototype` functions
var totalHeight = Array.prototype.reduce.call($('span'), function(a,b){
   // The first param is either the default value (passed into reduce)
   // or the result of the last call of this reducing function
   return a + $(b).outerHeight();
}, 0);

可以概括为http://jsfiddle.net/mendesjuan/bKtAn/7/

function addjQValues($jq, getter) {
    return Array.prototype.reduce.call( $jq, function (a, b) {
        return a+ getter.call($(b));
    }, 0);  
}
addjQValues($('span'), $.fn.height)

制作一个插件，如：http://jsfiddle.net/mendesjuan/bKtAn/9/

(function( $ ) {
    $.fn.addUp = function(getter) {  
      return Array.prototype.reduce.call(this, function(a,b){
            return a + getter.call($(b));
      }, 0);  
    }
})(jQuery);
$('span').addUp($.fn.height);
$('span').addUp($.fn.width);
$('span').addUp($.fn.text);

我觉得我有点过火了，对不起，我很兴奋，但是这些代码片段教你很多关于JS甚至一些jQuery的知识

Answer 3

$("selector")已经是一个集合。 直接访问.outerHeight() 或任何其他方法，例如.height()

var total = 0;
$("div").outerHeight(function(i, v){
   total += v;
});

alert( total ); // Just to test

var total = 0;

$("div").outerHeight(function(i, v){ total += v; });

alert( total );

div{background:#eee; margin:3px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100px;">100px</div>
<div>just lots of breaklines :)<br><br><br><br></div>
<div style="height:200px;">200px</div>

Answer 4

var total = 0;
$('.profile').each(function() {
     total += $(this).outerHeight();
});

$("#total-height").text(total + 'px');

Answer 5

不返回jQuery对象的jQuery函数仅对列表的第一个成员起作用。

如果您想迭代所有.profile个元素，可以使用.each()

var totalHeight = 0;
$('.profile').each(function(i, e) {
    totalHeight += $(e).outerHeight();
});

Answer 6

试试这个：

var outerHeightTotal = 0;
$('.profile').each(function(){
  outerHeightTotal += $(this).outerHeight();
});

Answer 7

您也可以像我一样懒惰，并引入一个新的jQuery函数，它将为您完成所有工作，像这样：

(function($) {    
    $.fn.sumOfOuterHeights = function () {
        var sum = 0;
        $(this).each(function () {
            sum += $(this).outerHeight();
        });
        return sum;
    };
})(jQuery);

然后在您喜欢的地方在您的代码中使用它：

var height = $('.a, .b, .c').sumOfOuterHeights();

对我来说，如果您经常使用它，它也更具可读性和干燥性。

Answer 8

更多现代选择：

PreloadSystem()

Answer 9

您可以使用get本机元素数组和reduce来获取总和。

这可能更干净，因为它是一行，不需要事先声明变量。

const height = $('div').get().reduce((prev, curr) => prev + curr.offsetHeight, 0);
console.log(height);

.child1 {
  height: 30px;
  background: red;
}

.child2 {
  height: 50px;
  background: green;
}

.child3 {
  height: 10px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>

这种方法当然可以在没有jQuery的情况下使用。 [...]就是将NodeList转换为元素数组）

const height = [...document.querySelectorAll('div')].reduce((prev, curr) => prev + curr.offsetHeight, 0);
console.log(height);

.child1 {
  height: 30px;
  background: red;
}

.child2 {
  height: 50px;
  background: green;
}

.child3 {
  height: 10px;
  background: blue;
}

<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>

获取同一类的所有元素的outerHeight的总和

9 个答案: