JQuery - удельное значение переменного для каждого элемента

Question

Я пытаюсь создать адаптивную круг элемент, который будет иметь такую ​​же высоту, как и его ширина, код здесь:

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

Это работает. Но у второго контейнера нет текстов, поэтому вы ничего не видите.

<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/)