jquery - 获取同一个类的所有元素的outerHeight之和

Question

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

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

现在 varouterHeight只给了我 class 的第一个元素的 outerHeight .profile。

如何获得类中所有元素的 outerHeights 的总和.profile？

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

这可以概括为reduce一个插件，如：http: //jsfiddle.net/mendesjuan/bKtAn/9/

(function( $ ) {
    $.fn.reduce = function(cb, init) {  
      return Array.prototype.reduce.call(this, function(a,b){
            return cb(a, b);
      }, init);  
    }
})(jQuery);

const total = $('span').reduce(
   (accumulator, current) => accumulator + $(current).height(),
   0
);
console.log({total});

我觉得我有点过火了，抱歉，我很兴奋，但是这些代码片段教会了你很多关于 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

您可以使用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>

Answer 8

你也可以像我一样偷懒，引入一个新的 jQuery 函数来为你完成所有的工作，就像这样：

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

然后在你喜欢的任何地方使用它：

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

对我来说，如果您经常使用它，它的可读性和 DRY 也会更高一些。

Answer 9

更现代的选择：

let height = 0
$('.profile').each((i, el) => height += $(el).outerHeight())