jQuery - valeur variable spécifique pour chaque élément

Question

Je suis en train de créer un élément de cercle adaptatif, qui aura la même hauteur que sa largeur, le code est ici:

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

Il fonctionne quand j'ai un jeu de ces cercles, mais quand je crée une autre div avec la division différente:

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

Il ne travaille plus et les cercles conservent leur hauteur générée dans le premier cas.

Existe-t-il un moyen de générer la variable une fois qu'un autre élément a été créé?

Answer 1

Cela fonctionne. Mais le deuxième conteneur n'a pas de texte, donc vous ne voyez rien.

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

Ici testé pour vous avec le texte rempli: (https://jsfiddle.net/L0rf3vam/)