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

jQuery - 每个元素的特定变量值

1 个答案: