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

jQuery - specific variable value for each element

本文关键字：变量值 元素 jQuery      更新时间：2023-09-26

我正在尝试创建一个自适应圆元素，它的高度和宽度相同，代码如下：

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>

它不再起作用，并且在第一种情况下，圆保持其生成的高度。

有没有一种方法可以在创建另一个元素后使变量生成？

它是有效的。但第二个容器并没有文本，所以您看不到任何内容。

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

相关文章：