如何使用jQuery计算指定类（.a）元素的总高度？

嘿，这事儿不难，我给你两种靠谱的实现方式，你可以根据自己的需求选：

方式一：用each遍历累加（直观易懂） #

先初始化一个变量存总高度，然后逐个遍历所有.a元素，把每个元素的高度加进去就行。这里要注意不同高度方法的区别，选适合你的：

var count_of_a = 0;
jQuery(".a").each(function() {
  // 如果你要的是元素内容高度（不含padding、border、margin），用height()
  // count_of_a += jQuery(this).height();
  
  // 如果你要内容+padding+border的高度，用outerHeight()
  // count_of_a += jQuery(this).outerHeight();
  
  // 如果你要元素实际占据的总高度（含margin），用outerHeight(true)，这是最常用的场景
  count_of_a += jQuery(this).outerHeight(true);
});

方式二：用reduce简化写法（更紧凑） #

利用数组的reduce方法，把jQuery对象转成原生DOM数组后直接累加，代码更简洁：

var count_of_a = jQuery(".a").get().reduce(function(total, elem) {
  return total + jQuery(elem).outerHeight(true);
}, 0);

小提示 #

• 记得根据实际需求选择高度方法：height()/outerHeight()/outerHeight(true)，别选错了导致结果不符合预期
• 如果页面里的.a元素是动态加载的，要确保这段代码在元素加载完成后再执行（比如放在$(document).ready()里，或者动态加载后的回调中）

内容的提问来源于stack exchange，提问作者Tomáš Vavřinka