jquery - 同じクラスのすべての要素の outerHeight の合計を取得します

Question

これはかなり単純な問題だと思いますが...

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

現在、varouterHeightは class を持つ最初の要素のみの outerHeight を提供します.profile。

class を持つすべての要素の outerHeights の合計を取得するにはどうすればよい.profileですか?

Answer 1

一致する各要素をループし、outerheights を合計します。

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

Answer 2

これが簡単な解決策です。sを合計する jQuery オブジェクトの要素をループするだけouterHeight()です。

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

重要なことは、すべての jQuery ゲッターが 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

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

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

Answer 4

jQuery オブジェクトを返さない jQuery 関数は、リストの最初のメンバーに対してのみ動作します。

すべての.profile要素を反復処理する場合は、次を使用できます.each()

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

Answer 5

これを試して：

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