同じclass名を持つ要素のwidthを取得してまた別の要素のwidthの値に設定したいです。

Question

下にコードも書きますが、
例えば
.contentsをclass名で持つdivのバラバラな値を配列で取得し、
それを.picのwidthよりでかい場合は、.picと.contentsを囲む.areaという全体のdivのwidthに
それぞれの.contentsのwidthを順番どおり入れたいのですが、
なんとなく.contentsを配列にしてwidthの値を持ってくる→その値をそれぞれの.areaに移すなのかな
とも思いましたが、配列で取得した値をまた順番に入れるという流れがコード上で理解できず・・・。
ご教授頂けると幸いです。

<div class="area">
  <div class="pic pic01"></div>
  <div class="contents contents01">
</div>

<div class="area">
  <div class="pic pic02"></div>
  <div class="contents contents02">
</div>

<div class="area">
  <div class="pic pic03"></div>
  <div class="contents contents03">
</div>

var biggestWidth = $(".area").width();
var array1 = [];
$('.contents').each(function(i){
  var boxWidth = $(this).width() + (i + 1);
  array1.push(boxWidth);
});
console.log(array1);

$.each(array1, function(index, elem){
  if(elem > biggestWidth){
    biggestWidth = elem;
  }
  console.log(biggestWidth);
});

Answer 1

CSSの指定がないなら.picも.contentも.areaも同じ幅になりますよね？
逆になにか指定しているなら最初の$(".pic").width()が一番最初の
.picしか見ないので不十分です

Comments

[yambejp]

$(window).onは$'$(function(){の中に入れる必要はありません

[退会済みユーザー]

最初のpicしか取れないというところから試行錯誤して、値を取りたい箇所を配列にまではしました。
が、.areaの値を持つ変数と比較しようとしたら上手くいきません・・・。
コードの考え方に何か不備があるのでしょうか？