jQuery - spezifischer Variablenwert für jedes Element

Question

Ich versuche, ein adaptives Kreiselement zu schaffen, die die gleiche Höhe wie seine Breite haben werden, ist der Code hier:

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

Es funktioniert, wenn ich einen Satz habe solcher Kreise, aber wenn ich erstellen Sie ein anderes div mit unterschiedlicher Einteilung:

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

Es ist nicht mehr arbeiten und die Kreise behalten ihre Höhe im ersten Fall erzeugt.

Gibt es eine Möglichkeit, die Variable zu generieren, sobald ein anderes Element erstellt wird?

Answer 1

Es funktioniert. Aber der zweite Container hat keine Texte, Sie sehen also nichts.

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

Hier für Sie getestet mit gefülltem Text: (https://jsfiddle.net/L0rf3vam/)