jQueryの - その幅と同じ高さになります、私は適応円要素を作成しようとしています

Question

各要素のための特定の変数値は、コードはここにある：私は1つのセットを持っているとき

jQuery(document).ready(function() { 
//Adaptive Circle 
var width = jQuery(".circle-adaptive").width(); 
jQuery(".circle-adaptive").css({"height":width+"px", "line-height":width+"px"}); 
}); 

それは動作しますこうした円のが、私は別の部門と別のdivを作成する場合：

<div class="container" style=" border:2px solid black"> 
    <div class="container onethird"> 
     <div class="circle-adaptive red">R</div> 
    </div> 
    <div class="container onethird"> 
     <div class="circle-adaptive green">G</div> 
    </div> 
    <div class="container onethird"> 
     <div class="circle-adaptive blue">B</div> 
    </div> 
</div> 

<div class="container" style="border:2px solid black"> 
    <div class="container onequarter"> 
     <div class="circle-adaptive pink"></div> 
    </div> 
    <div class="container onequarter"> 
     <div class="circle-adaptive yellow"></div> 
    </div> 
    <div class="container onequarter"> 
     <div class="circle-adaptive gray"></div> 
    </div> 
    <div class="container onequarter"> 
     <div class="circle-adaptive magenta"></div> 
    </div> 
</div> 

それはもはや機能しないのと、円はその高さは最初のケースで生成され続けます。

別の要素を作成したら変数を生成する方法はありますか？

Answer 1

これは機能します。しかし、2番目のコンテナにはテキストがないので、何も表示されません。

<div class="container" style=" border:2px solid black"> 
     <div class="container onethird"> 
      <div class="circle-adaptive red">R</div> 
     </div> 
     <div class="container onethird"> 
      <div class="circle-adaptive green">G</div> 
     </div> 
     <div class="container onethird"> 
      <div class="circle-adaptive blue">B</div> 
     </div> 
    </div> 

    <div class="container" style="border:2px solid black"> 
     <div class="container onequarter"> 
      <div class="circle-adaptive pink">1</div> 
     </div> 
     <div class="container onequarter"> 
      <div class="circle-adaptive yellow">2</div> 
     </div> 
     <div class="container onequarter"> 
      <div class="circle-adaptive gray">3</div> 
     </div> 
     <div class="container onequarter"> 
      <div class="circle-adaptive magenta"></div> 
     </div> 
    </div> 

がここで満たされたテキストであなたのためのテスト：（https://jsfiddle.net/L0rf3vam/）