[ jQuery ] 要素に含まれている要素に対して共通の計算を行う

良く忘れるので、自分用にメモです。jQueryを使ってすべての要素に対して共通の計算を行う機会があったので、効率良い方法がないか検証してみました。

今回の例は、要素中に含まれるすべての要素の高さの合計を計算するものになります。
親要素に高さが反映されないabsolute指定された要素などがある場合に使うことが多いと思います。

jQueryで良くある書き方

var sum = 0;

$('#target > *').each(function(){

    sum += $(this).outerHeight(true);

});

console.log(sum);

上記の方法でも問題ないのですが、もう少しスマートに書きたいですね。そこでjavascriptのreduce関数を見つけました。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

reduce関数を使った書き方

var sum = $('#target > *').get().reduce(function(s, el){

    return s += $(el).outerHeight(true);

}, 0);

console.log(sum);

もっと良い方法があればコメント頂ければと思います。

備忘録エントリーでした！