jquery - 将动态CSS添加到同一类的不同实例

从 previous question 开始, 我稍微改变了我的动态设计，尽管(显然)在其生产中遇到了一些困难。

我有一个这样的屏幕:

+------+  +------+ 
|  T1  |  |  T2  |
|      |  |      |
+------+  +------+
+------+  +------+ 
|  T3  |  |  T4  |
|      |  |      |
+------+  +------+

其中“T”是不同的圆柱体形状。

 <div class="tankWidget">
        <div class="banner">Tank 2</div>

        <div class="container">
            <div class="frame">
                <div class="strip">
                    <div id="tank2FrameA" class="a">83%</div>
                    <div class="b"></div>
                    <div class="c"></div>
                    <div class="d"></div>
                    <div class="e"></div>
                    <div class="f"></div>
                    <div class="g"></div>
                    <div class="h"></div>
                    <div class="i"></div>
                    <div class="j"></div>
                    <div class="k"></div>
                    <div class="l"></div>
                    <div class="m"></div>
                    <div class="n"></div>
                    <div class="o"></div>
                    <div class="p"></div>
                    <div class="q"></div>
                    <div class="r"></div>
                    <div class="s"></div>
                    <div class="t"></div>
                    <div class="u"></div>
                    <div class="v"></div>
                    <div class="w"></div>
                    <div class="x"></div>
                </div>
            </div>
        </div>



        <div class="widget-footer">
            <table id="specTab23">
                <tr><th>Volume (T)</th><th>Capacity (T)</th><th>Ullage (T)</th></tr>
                <tr id="tank2"><td>6260</td><td>7500</td><td>1.24</td></tr>
            </table>
            <br />
            <div class="lowerWidget-footer">
                <button>Details</button>
            </div>
        </div>
    </div>

我在“拆分”它们的内容时使用了 gradient(与我在上一个问题中使用的“bottom:50%”不同)。

这有望使生成类似这样的东西变得更容易:

+------------------+    +------------------+
|                  |    |                  |
|   +----------+   |    |   +----------+   |
|   |   50%    |   |    |   |   25%    |   |
|   |          |   |    |   |          |   |
|   |----------|   |    |   |          |   |
|   |          |   |    |   |----------|   |
|   |          |   |    |   |          |   |
|   +----------+   |    |   +----------+   |
+------------------+    +------------------+

因此，我正在尝试向 strip 的 parent 添加一些 CSS 样式(在 jquery 的第二部分中显示)，其中应该是类“strip” "我想添加。

所以我尝试使用:

 var tank1 = $('#tank1FrameA').text();
        tank1 = 100-parseInt(tank1);
        alert("tank 1 value is " + tank1);
        $('.strip div').css("background", "-moz-linear-gradient(top, #000fff 0%, #000fff " + tank1 + "%, #ffff00 " + tank1 + "% #ffff00 100%)")
        $('.strip div').css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + tank1 + "%,#000fff), color-stop(" + tank1 + "%,#ffff00), color-stop(100%,#ffff00))")
        $('.strip div').css("background", "-webkit-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
        $('.strip div').css("background", "-o-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
        $('.strip div').css("background", "-ms-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
        $('.strip div').css("background", "linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")

        var tank2 = $('#tank2FrameA').text();
        tank2 = 100 - parseInt(tank2);
        alert("tank 2 value is " + tank2);
        $('#tank2FrameA').parent().parent().css("background", "-moz-linear-gradient(top, #000fff 0%, #000fff " + tank2 + "%, #ffff00 " + tank2 + "% #ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + tank2 + "%,#000fff), color-stop(" + tank2 + "%,#ffff00), color-stop(100%,#ffff00))")
        $('#tank2FrameA').parent().parent().css("background", "-webkit-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "-o-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "-ms-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")

我想在其中向父级添加样式。但是，作为测试，我将 css 添加到 '.strip div' (对所有坦克都成功)，但我似乎无法对每个坦克本身

执行此操作

我当前的 CSS 如下所示:

 $(document).ready(function () {



        //dynamically ajusting the strips
        var tank1 = $('#tank1FrameA').text();
        tank1 = 100-parseInt(tank1);
        alert("tank 1 value is " + tank1);
        $('.strip div').css("background", "-moz-linear-gradient(top, #000fff 0%, #000fff " + tank1 + "%, #ffff00 " + tank1 + "% #ffff00 100%)")
        $('.strip div').css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + tank1 + "%,#000fff), color-stop(" + tank1 + "%,#ffff00), color-stop(100%,#ffff00))")
        $('.strip div').css("background", "-webkit-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
        $('.strip div').css("background", "-o-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
        $('.strip div').css("background", "-ms-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
        $('.strip div').css("background", "linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")

        var tank2 = $('#tank2FrameA').text();
        tank2 = 100 - parseInt(tank2);
        alert("tank 2 value is " + tank2);
        $('#tank2FrameA').parent().parent().css("background", "-moz-linear-gradient(top, #000fff 0%, #000fff " + tank2 + "%, #ffff00 " + tank2 + "% #ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + tank2 + "%,#000fff), color-stop(" + tank2 + "%,#ffff00), color-stop(100%,#ffff00))")
        $('#tank2FrameA').parent().parent().css("background", "-webkit-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "-o-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "-ms-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
        $('#tank2FrameA').parent().parent().css("background", "linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")



    });

.tankWidget{
    position:relative;
    width:45%;
    height:400px;
    float:left;
    background-color:#c4c4c4;
    margin:1.5%;
        }
.banner{
    min-height:40px;
    width:100%;
    background-color:#383838;
    color:#ececec;
    margin:0;
}
.widget-footer{
    min-height:40px;
    width:100%;
    background-color:#383838;
    bottom:0;
    position:absolute;
    color:#ececec;
}
.container {
    margin:0;
    margin-top:-50px;    
    width:100%;
    padding:0;    
    -moz-perspective: 1000px; /*required to make cylinder shape*/
    -webkit-perspective: 1000px;
}
.frame {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 70px, 0px);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);

    margin: 0 50%;
}

.strip {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.strip div {

        position: fixed;
    background: rgba(128,128,128,0.99);
    background-repeat:repeat;
    border-width: thin 10px;
    transition: all .2s;
    height:120px; /*height and width of tank display*/
    width:34px;
    border-top:1px solid black;
    border-bottom:1px solid black;


   
    background: -moz-linear-gradient(top, #000fff 0%, #000fff 10%, #ffff00 10% #ffff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(10%,#000fff), color-stop(10%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #000fff 0%,#000fff 10%,#ffff00 10%,#ffff00 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top, #000fff 0%,#000fff 10%,#ffff00 10%,#ffff00 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #000fff 0%,#000fff 10%,#ffff00 10%,#ffff00 100%); /* IE10+ */
    background: linear-gradient(top, #000fff 0%,#000fff 10%,#ffff00 10%,#ffff00 100%); /* W3C */
   

    -webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;

-webkit-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96);
-moz-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96);
box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96);
}

.strip .a {

  
     border-top:1px solid black;
    -moz-transform: rotateY(0deg) translateZ(124px);
    -webkit-transform: rotateY(0deg) translateZ(124px)
}
.strip .b {
     border-top:1px solid black;
    -moz-transform: rotateY(15deg) translateZ(124px);
    -webkit-transform: rotateY(15deg) translateZ(124px)
}
.strip .c {
     border-top:1px solid black;
    -moz-transform: rotateY(30deg) translateZ(124px);
    -webkit-transform: rotateY(30deg) translateZ(124px);
}
 .strip .c {
    background: rgb(0,0,0) !important; /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(128,128,128,1) 1%, rgba(128,128,128,1) 9%, rgba(0,0,0,1) 10%, rgba(128,128,128,1) 11%, rgba(128,128,128,1) 19%, rgba(0,0,0,1) 20%, rgba(128,128,128,1) 21%, rgba(128,128,128,1) 29%, rgba(0,0,0,1) 30%, rgba(128,128,128,1) 31%, rgba(128,128,128,1) 39%, rgba(0,0,0,1) 40%, rgba(128,128,128,1) 41%, rgba(128,128,128,1) 49%, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 51%, rgba(128,128,128,1) 59%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 60%, rgba(128,128,128,1) 61%, rgba(128,128,128,1) 69%, rgba(0,0,0,1) 70%, rgba(128,128,128,1) 71%, rgba(128,128,128,1) 79%, rgba(0,0,0,1) 80%, rgba(128,128,128,1) 81%, rgba(128,128,128,1) 89%, rgba(0,0,0,1) 90%, rgba(128,128,128,1) 91%, rgba(128,128,128,1) 99%, rgba(0,0,0,1) 100%)!important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(128,128,128,1)), color-stop(9%,rgba(128,128,128,1)), color-stop(10%,rgba(0,0,0,1)), color-stop(11%,rgba(128,128,128,1)), color-stop(19%,rgba(128,128,128,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(128,128,128,1)), color-stop(29%,rgba(128,128,128,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(128,128,128,1)), color-stop(39%,rgba(128,128,128,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(128,128,128,1)), color-stop(49%,rgba(128,128,128,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(128,128,128,1)), color-stop(59%,rgba(128,128,128,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(128,128,128,1)), color-stop(69%,rgba(128,128,128,1)), color-stop(70%,rgba(0,0,0,1)), color-stop(71%,rgba(128,128,128,1)), color-stop(79%,rgba(128,128,128,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(128,128,128,1)), color-stop(89%,rgba(128,128,128,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(91%,rgba(128,128,128,1)), color-stop(99%,rgba(128,128,128,1)), color-stop(100%,rgba(0,0,0,1)))!important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
.strip .d {
    border-top:1px solid black;
    -moz-transform: rotateY(45deg) translateZ(124px);
    -webkit-transform: rotateY(45deg) translateZ(124px)
}
.strip .e {
    border-top:1px solid black;
    -moz-transform: rotateY(60deg) translateZ(124px);
    -webkit-transform: rotateY(60deg) translateZ(124px)
}
.strip .f {
    border-top:1px solid black;
  
    -moz-transform: rotateY(75deg) translateZ(124px);
    -webkit-transform: rotateY(75deg) translateZ(124px)
}
.strip .g {
    border-top:1px solid black;
    -moz-transform: rotateY(90deg) translateZ(124px);
    -webkit-transform: rotateY(90deg) translateZ(124px)
}
.strip .h {
    border-top:1px solid black;
    -moz-transform: rotateY(105deg) translateZ(124px);
    -webkit-transform: rotateY(105deg) translateZ(124px)
}
.strip .i {
    border-top:1px solid black;
    -moz-transform: rotateY(120deg) translateZ(124px);
    -webkit-transform: rotateY(120deg) translateZ(124px)
}
.strip .j {
    border-top:1px solid black;
    -moz-transform: rotateY(135deg) translateZ(124px);
    -webkit-transform: rotateY(135deg) translateZ(124px)
}
.strip .k {
    border-top:1px solid black;
    -moz-transform: rotateY(150deg) translateZ(124px);
    -webkit-transform: rotateY(150deg) translateZ(124px)
}
.strip .l {
    border-top:1px solid black;
    -moz-transform: rotateY(165deg) translateZ(124px);
    -webkit-transform: rotateY(165deg) translateZ(124px)
}
.strip .m {
    border-top:1px solid black;
    -moz-transform: rotateY(180deg) translateZ(124px);
    -webkit-transform: rotateY(180deg) translateZ(124px)
}
.strip .n {
    border-top:1px solid black;
    -moz-transform: rotateY(195deg) translateZ(124px);
    -webkit-transform: rotateY(195deg) translateZ(124px)
}
.strip .o {
    border-top:1px solid black;
    -moz-transform: rotateY(210deg) translateZ(124px);
    -webkit-transform: rotateY(210deg) translateZ(124px)
}
.strip .p {
    border-top:1px solid black;
    -moz-transform: rotateY(225deg) translateZ(124px);
    -webkit-transform: rotateY(225deg) translateZ(124px)
}
.strip .q {
    border-top:1px solid black;
    -moz-transform: rotateY(240deg) translateZ(124px);
    -webkit-transform: rotateY(240deg) translateZ(124px)
}
.strip .r {
    border-top:1px solid black;
    -moz-transform: rotateY(255deg) translateZ(124px);
    -webkit-transform: rotateY(255deg) translateZ(124px)
}
.strip .s {
    border-top:1px solid black;
    -moz-transform: rotateY(270deg) translateZ(124px);
    -webkit-transform: rotateY(270deg) translateZ(124px)
}
.strip .t {
    border-top:1px solid black;
    -moz-transform: rotateY(285deg) translateZ(124px);
    -webkit-transform: rotateY(285deg) translateZ(124px)
}
.strip .u {
    border-top:1px solid black;
    -moz-transform: rotateY(300deg) translateZ(124px);
    -webkit-transform: rotateY(300deg) translateZ(124px)
}
.strip .v {
    border-top:1px solid black;
    -moz-transform: rotateY(315deg) translateZ(124px);
    -webkit-transform: rotateY(315deg) translateZ(124px)
}
.strip .w {
    border-top:1px solid black;
    -moz-transform: rotateY(330deg) translateZ(124px);
    -webkit-transform: rotateY(330deg) translateZ(124px)
}
.strip .x {
    border-top:1px solid black;
    -moz-transform: rotateY(345deg) translateZ(124px);
    -webkit-transform: rotateY(345deg) translateZ(124px);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tankWidget">
        <div class="banner">Tank 1: Kero</div>

        <div class="container">
            <div class="frame">
                <div class="strip">
                    <div id="tank1FrameA" class="a">31%</div>
                    <div class="b"></div>
                    <div class="c"></div>
                    <div class="d"></div>
                    <div class="e"></div>
                    <div class="f"></div>
                    <div class="g"></div>
                    <div class="h"></div>
                    <div class="i"></div>
                    <div class="j"></div>
                    <div class="k"></div>
                    <div class="l"></div>
                    <div class="m"></div>
                    <div class="n"></div>
                    <div class="o"></div>
                    <div class="p"></div>
                    <div class="q"></div>
                    <div class="r"></div>
                    <div class="s"></div>
                    <div class="t"></div>
                    <div class="u"></div>
                    <div class="v"></div>
                    <div class="w"></div>
                    <div class="x"></div>
                </div>
            </div>
        </div>

        <div class="widget-footer">
            <table id="specTab1">
                <tr><th>Volume (T)</th><th>Capacity (T)</th><th>Ullage (T)</th></tr>
                <tr><td>2500</td><td>8000</td><td>0.97</td></tr>
            </table>
            <br />
            <div class="lowerWidget-footer">
                <button>Details</button>
            </div>
        </div>
    </div>

    <div class="tankWidget">
        <div class="banner">Tank 2: Derv</div>

        <div class="container">
            <div class="frame">
                <div class="strip">
                    <div id="tank2FrameA" class="a">83%</div>
                    <div class="b"></div>
                    <div class="c"></div>
                    <div class="d"></div>
                    <div class="e"></div>
                    <div class="f"></div>
                    <div class="g"></div>
                    <div class="h"></div>
                    <div class="i"></div>
                    <div class="j"></div>
                    <div class="k"></div>
                    <div class="l"></div>
                    <div class="m"></div>
                    <div class="n"></div>
                    <div class="o"></div>
                    <div class="p"></div>
                    <div class="q"></div>
                    <div class="r"></div>
                    <div class="s"></div>
                    <div class="t"></div>
                    <div class="u"></div>
                    <div class="v"></div>
                    <div class="w"></div>
                    <div class="x"></div>
                </div>
            </div>
        </div>



        <div class="widget-footer">
            <table id="specTab23">
                <tr><th>Volume (T)</th><th>Capacity (T)</th><th>Ullage (T)</th></tr>
                <tr id="tank2"><td>6260</td><td>7500</td><td>1.24</td></tr>
            </table>
            <br />
            <div class="lowerWidget-footer">
                <button>Details</button>
            </div>
        </div>
    </div>

这两个警报说明了我希望坦克达到的百分比(即颜色/渐变的 split )。

我知道这可能是今天问得最多/最不清楚的问题，但我会尽力澄清所有方面。

为帮助干杯。

最佳答案

使用每个函数循环。它循环遍历在中指定的所有选定元素的功能。

我已经解决了一次:

<div class="parent commonclass">
<div class="child"></div>
</div>

<div class="parent commonclass">
<div class="child"></div>
</div>

脚本如下:

$('commonclass').each(function(){
 $(this).find('.child').css({'background':'grey'});
});

希望对你有帮助

关于jquery - 将动态CSS添加到同一类的不同实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27127508/

jquery - 将动态CSS添加到同一类的不同实例

上一篇：php - WordPress 菜单样式

下一篇：jquery - 在div中添加向上滑动动画