JqueryまたはJavascriptでn番目のクラスのCSSを変更しました

Question

私のコードで第5回infobox（クラス）のテキストの色を変更しようとしています。テキストの色は変わりますが、すべての情報が変わります。

//INFOBOX5 
 
var json_data = {"headers":["Platform","Value1","value1","valueP1","valueP2"],"rows":[["platform2","xxx",404.07000000000005,1634,6364],["platform5","xxx",404.07000000000005,1634,6364],["platform1","xxx",352.8,1634,6364],["platform3","xxx",352.8,1634,6364], 
 
["platform3","xxx",352.8,1634,6364],["platform4","xxx",352.8,1634,6364]]}; 
 

 
    var platform_data = json_data.rows; 
 
    var platform1_element = document.getElementById("platform1"); 
 
    var platform5_element = document.getElementById("platform5"); 
 
    var platform6_element = document.getElementById("platform6"); 
 
    var platform2_element = document.getElementById("platform2"); 
 
    var platform3_element = document.getElementById("platform3"); 
 
    var platform4_element = document.getElementById("platform4"); 
 

 
    function onlyUnique(value, index, self) { 
 
     return self.indexOf(value) === index; 
 
    } 
 
    function formatNumber (num) { 
 
     return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") 
 
    } 
 
    var platforms = []; 
 
    for (var i in platform_data) { 
 
     if (platform_data[i][0] != null){ 
 
      platforms[i] = platform_data[i][0].toLowerCase(); 
 
     } 
 
    } 
 
    
 
    var unique_platforms = platforms.filter(onlyUnique); 
 

 
    var target_width = 100/(unique_platforms.length-2); 
 
    var width_str=target_width+"%"; 
 

 
    platform1_element.classList.add("hidden"); 
 
    platform5_element.classList.add("hidden"); 
 
    platform6_element.classList.add("hidden"); 
 
    platform3_element.classList.add("hidden"); 
 
    platform2_element.classList.add("hidden"); 
 
    platform4_element.classList.add("hidden"); 
 
    
 
    var total_value1 = 0; 
 
    var total_value2 = 0; 
 
    var total_display_value1 = 0; 
 
    var total_video_value1 = 0; 
 
    var total_mixed_value1 = 0; 
 
    var total_other_value1 = 0; 
 
    var total_display_value2 = 0; 
 
    var total_video_value2 = 0; 
 
    var total_mixed_value2 = 0; 
 
    var value2_numbers = []; 
 
    
 
    for (var i in unique_platforms) { 
 
     var platform_name = unique_platforms[i].toLowerCase(); 
 

 
     var display_value1_total = 0; 
 
     var display_value2_total = 0; 
 
     var video_value1_total = 0; 
 
     var video_value2_total = 0; 
 
     var mixed_value1_total = 0; 
 
     var mixed_value2_total = 0; 
 
     var other_value1_total = 0;   
 

 
     for (var x in platform_data){ 
 
      if (platform_data[x][0] != null){ 
 
        if(platform_data[x][0].toLowerCase() == platform_name){ 
 
        switch(platform_data[x][1]) { 
 
         case "display": 
 
         // Red Dot 
 
         display_value1_total = display_value1_total + platform_data[x][2]; 
 
         total_value1 = total_value1 + display_value1_total; 
 
         break; 
 
         case "video": 
 
         video_value1_total = video_value1_total + platform_data[x][2]; 
 
         total_value1 = total_value1 + video_value1_total; 
 
         break; 
 
         case "mixed": 
 
         mixed_value1_total = mixed_value1_total + platform_data[x][2]; 
 
         total_value1 = total_value1 + mixed_value1_total; 
 
         break; 
 
         case "Other": 
 
         other_value1_total = other_value1_total + platform_data[x][2]; 
 
         total_value1 = total_value1 + other_value1_total; 
 
         break; 
 
         default: 
 
         doNothing = ""; 
 
        } 
 
       } 
 
      }else { 
 
       value2_numbers = platform_data[x]; 
 
      }    
 
     } 
 

 
     var platform_value1 = display_value1_total + video_value1_total + mixed_value1_total + other_value1_total; 
 
     var generic_element = document.getElementById(platform_name); 
 

 
     var element_value1_name = platform_name+"_value1"; 
 
     var fl_value1 = parseFloat(platform_value1).toFixed(0); 
 
     var curr_flag = "€"+formatNumber(fl_value1); 
 
     document.getElementById(element_value1_name).innerHTML = curr_flag; 
 

 
     total_display_value1 = total_display_value1 + display_value1_total; 
 
     total_video_value1 = total_video_value1 + video_value1_total; 
 
     total_mixed_value1 = total_mixed_value1 + mixed_value1_total; 
 
    } 
 

 
    var total_value1_string = "<h1>&euro;" + formatNumber(Number(total_value1).toFixed(0)) + "</h1>"; 
 
    //document.getElementById("total_value1").innerHTML = total_value1_string; 
 

 
    if (value2_numbers.length == 0){ 
 
     value2_numbers = platform_data[0]; 
 
    } 
 
    var fl_value2 = 0; 
 
    var curr_flag_bud = ''; 
 
    var element_value2_name = ''; 
 

 
    
 
    for (var i in json_data.headers){ 
 
     switch(json_data.headers[i]) { 
 
      case "valueP1": 
 
        element_value2_name = "platform1_value2"; 
 
        fl_value2 = parseFloat(value2_numbers[i]).toFixed(0); 
 
        curr_flag_bud = "&euro;"+formatNumber(fl_value2); 
 
        document.getElementById(element_value2_name).innerHTML = curr_flag_bud; 
 
        break; 
 
     \t \t case "valueP2": 
 
        element_value2_name = "platform2_value2"; 
 
        fl_value2 = parseFloat(value2_numbers[i]).toFixed(0); 
 
        curr_flag_bud = "&euro;" +formatNumber(fl_value2); 
 
        document.getElementById(element_value2_name).innerHTML = curr_flag_bud; 
 
        break;  
 
      \t case "valueP1": 
 
        element_value2_name = "platform1_value2"; 
 
        fl_value2 = parseFloat(value2_numbers[i]).toFixed(0); 
 
        curr_flag_bud = "&euro;" +formatNumber(fl_value2); 
 
        document.getElementById(element_value2_name).innerHTML = curr_flag_bud; 
 
        break; 
 
        default: 
 
     } 
 
    } 
 
    
 
    var statBox = Array.from(document.querySelectorAll('.infobox')); 
 

 
    var element_id; 
 
    
 
    var parentBoxlist = Array.from(document.querySelectorAll('.parentbox')); 
 

 
    var channel_value1_check = 0; 
 
    var value1_channels = []; 
 

 
// if (total_mixed_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[0] = 'mixed';}; 
 
// if (total_video_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[1] = 'video';}; 
 
// if (total_display_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[2] = 'display';}; 
 

 
    statBox.forEach(function(box) { 
 
     switch(unique_platforms.length) { 
 
      case 1: 
 
        // 1 box 
 
        element_id = box.getAttribute('id'); 
 
        if (unique_platforms.includes(element_id)){ 
 
         box.classList.add('infobox1'); 
 
         box.classList.remove('hidden'); 
 
        } 
 
        break; 
 
        case 2: 
 
        // 2 box's 
 
        element_id = box.getAttribute('id'); 
 
        if (unique_platforms.includes(element_id)){ 
 
         box.classList.add('infobox2'); 
 
         box.classList.remove('hidden'); 
 
        } 
 
        break; 
 
        case 3: 
 
        // 3 box's 
 
        element_id = box.getAttribute('id'); 
 
        if (unique_platforms.includes(element_id)){ 
 
         box.classList.add('infobox3'); 
 
         box.classList.remove('hidden'); 
 
        } 
 
        break; 
 
        case 4: 
 
        // 4 box's 
 
        element_id = box.getAttribute('id'); 
 
        if (unique_platforms.includes(element_id)){ 
 
         box.classList.add('infobox4'); 
 
         box.classList.remove('hidden'); 
 
        } 
 
        break; 
 
        case 5: 
 
        // 5 box's 
 
        element_id = box.getAttribute('id'); 
 
        if (unique_platforms.includes(element_id)){ 
 
         box.classList.add('infobox5'); 
 
         box.classList.remove('hidden'); 
 
        } 
 
        break; 
 
        default: 
 
       } 
 
      }); 
 

 
$(".boxbox:nth-of-type(1)").css("color", "#fff");

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 

 
    body{ 
 
    color: #fff; 
 
    font-family: Roboto; 
 
    margin:0; 
 
    overflow:hidden; 
 
    } 
 
    h1{ 
 
    font-size: 1.2vw; 
 
    } 
 
    h3{ 
 
    font-size: 1.1vw!important; 
 
    font-weight: 100; 
 
    margin: 0; 
 
    padding: 5px; 
 
    } 
 
    .redSq{ 
 
    background-color: #ff000a; 
 
    width: 117px; 
 
    height: 241px; 
 
    float:left; 
 
    } 
 
.row { 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 180px; 
 
    color: #454545; 
 
    background-color:#dee9f3; 
 
    //border: solid 1px #454545; 
 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
 
    margin-bottom: 10px; 
 
} 
 
.row > .col-lg-6 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container > div { 
 
    padding: 15px; 
 
    margin: 5px; 
 
    flex: 0 0 calc(100% - 20px); 
 
    text-align: left; 
 
} 
 
td{ 
 
    padding: 2px 2px; 
 
    text-align: center; 
 
    margin: 6px 0; 
 
    border: none; 
 
} 
 
table{ 
 
    width: 100%; 
 
    background-color:#454545; 
 
    font-weight:500; 
 
    border-collapse: separate; 
 
    border-spacing:0.3em 1.1em; 
 
    color: #fff; 
 
    border: 0; 
 
} 
 
p{ 
 
    font-size: 1.2vw; 
 
} 
 
    .boxes{ 
 
    padding-top: 40px; 
 
    padding-left: 30px; 
 
    padding-right: 5%; 
 
    min-width: 200px; 
 
    float:left; 
 
    display: inline-block; 
 
    } 
 

 
    #line{ 
 
    border-bottom: solid 1px #CCC; 
 
    margin-top: 0px; 
 
    padding-top: 15px; 
 
    } 
 

 
    .infobox { 
 
    float:left; 
 
    margin: 0; 
 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
 
    color: #454545; 
 
    } 
 

 
    .infobox1 { 
 
    float:left; 
 
    min-height:150px; 
 
    min-width: 100%; 
 
    margin: 0; 
 
    } 
 

 
    .infobox2 { 
 
    float:left; 
 
    min-height:150px; 
 
    min-width: 49%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
    } 
 

 
    .infobox3 { 
 
    float:left; 
 
    min-height:150px; 
 
    min-width: 32.33%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
    } 
 

 
    .infobox4 { 
 
    float:left; 
 
    //min-height:150px; 
 
    min-width: 23.9%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
    } 
 

 
    .infobox5 { 
 
    float:left; 
 
    min-height:150px; 
 
    min-width: 32.33%; 
 
    margin: 0 0.5% 0.7%; 
 
    //padding: 18px 0; 
 
    } 
 

 
    div.leftBox{ 
 
    float:left; 
 
    width:60%; 
 
    margin: 15px 0 0 25px; 
 
    font-size: 1.1vw;  
 
    } 
 
    div.rightBox{ 
 
    float:left; 
 
    width: 60%; 
 
    margin: 15px 0 0 25px; 
 
    font-size: 1.1vw; 
 
    } 
 

 
    .infocontentheader { 
 
    //text-align: center; 
 
    line-height: 2.8; 
 
    //color: #fff; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    float:left; 
 
    width:25%; 
 
    } 
 

 
    .infocontent{ 
 
    text-align: center; 
 
    color: #fff; 
 
    width: 50%; 
 
    float: left; 
 
    } 
 

 

 
    div#platform1.infocontentheader{ 
 
    background-color: #3c5999; 
 
    } 
 

 
    div#platform1.infobox img{ 
 
     display: block; 
 
     margin: 0 auto 0 auto; 
 
    } 
 

 
    p#sTitle { 
 
     font-weight: 900; 
 
     font-size: 1.5vw; 
 
    } 
 

 
    p#bTitle { 
 
     //font-weight: 900; 
 
     font-size: 1.2vw; 
 
    } 
 

 
    p#platform1_value1, p#platform5_value1, p#platform4_value1 ,p#platform3_value1, 
 
    p#platform2_value1, p#twitter_value1 { 
 
     font-weight: 900; 
 
     font-size: 1.3em; 
 
     margin: 10px 0 0 20px; 
 
    } 
 

 
    p#platform1_budget, p#platform5_budget, p#platform4_budget, p#platform3_budget, 
 
    p#platform2_budget, p#twitter_budget{ 
 
     font-size: 1.2em; 
 
     margin: 10px 0 0 20px;   
 
    } 
 

 
    div#twitter.infocontentheader{ 
 
    background-color: #1da1f2; 
 
    } 
 
    div#twitter.infobox img{ 
 
     display: block; 
 
     margin: 0 auto 0 auto; 
 
    } 
 

 

 
    div#platform3.infocontentheader{ 
 
    background-color: #a15aa0; 
 
    } 
 

 
    div#display.parentbox{ 
 
    background-color: #b3b3b3; 
 
    color: #fff; 
 
    } 
 

 
    div#video.parentbox{ 
 
    background-color: #999999; 
 
    color: #fff; 
 
    } 
 

 
    div#mixed.parentbox{ 
 
    background-color: #c1c1c1; 
 
    color: #fff; 
 
    } 
 

 
    #platform3 div.infocontentheader{ 
 
    color: #fff; 
 
    } 
 
    div#platform3.infobox img{ 
 

 
     display: block; 
 
     margin: 0 auto 0 auto; 
 
    } 
 

 
    div#platform3_value.infocontent{ 
 
    color: #000; 
 
    } 
 

 
    div#platform5.infocontentheader{ 
 
    background-color: #ff0102; 
 
    } 
 
    div#platform5.infobox img{ 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
    } 
 
    div#platform4.infocontentheader{ 
 
     background-color: #cac9c2; 
 
    } 
 
    div#platform4.infobox img{ 
 
     display: block; 
 
     margin: 10% auto 0 auto; 
 
    } 
 
    div#platform2.infobox{ 
 
    background-color: #fff; 
 
    } 
 
    div#platform2.infobox img{ 
 
    display: block; 
 
    margin: 10% auto 0 auto; 
 
    } 
 

 
    .hidden{ 
 
    display:none; 
 
    } 
 
    
 
    #parent_div_1{ 
 
     width:50%; 
 
     min-height: 150px; 
 
     background-color: #757476; 
 
     margin-right:0px; 
 
     float:left; 
 
    } 
 
    #parent_div_2{ 
 
     width:50%; 
 
     min-height: 150px; 
 
     background-color: #8D8D8D; 
 
     margin-right:0px; 
 
     float:left; 
 
    } 
 
    .parentbox{ 
 
     width:33.33%; 
 
     min-height: 150px; 
 
     /*background-color: #8D8D8D;*/ 
 
     margin-right:0px; 
 
     float:left; 
 
    } 
 
    .parentbox1{ 
 
     width:100%; 
 
     min-height: 150px; 
 
     margin-right:0px; 
 
     float:left; 
 
    } 
 
    .parentbox2{ 
 
     width:50%; 
 
     min-height: 150px; 
 
     margin-right:0px; 
 
     float:left; 
 
    } 
 
    .parentbox3{ 
 
     width:33.33%; 
 
     min-height: 150px; 
 
     margin-right:0px; 
 
     float:left; 
 
    } 
 
    .child_div_1{ 
 
    margin-top: 50px; 
 
    margin-left: 15%; 
 
    margin-bottom: 0px; 
 
    text-align: left; 
 
    } 
 
    .child_div_2{ 
 
    margin-left: 15%; 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    text-align: left; 
 
    } 
 
    .child_budget{ 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    padding-left:15%; 
 
    text-align: left; 
 
    float: left; 
 
    } 
 
    .child_value1{ 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    padding-right: 15%; 
 
    text-align: left; 
 
    float:right; 
 
    } 
 
    .child_title{ 
 
    margin-top: 50px; 
 
    margin-bottom: 0px; 
 
    text-align: center; 
 
    } 
 
    .child_budget_number{ 
 
     padding-right: 20%; 
 
    } 
 
    .child_value1_number{ 
 
     padding-left: 20%; 
 
    } 
 

 
.boxbox { 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 160px; 
 
    color: #454545; 
 
    font-size:1.1vw; 
 
} 
 

 
.boxbox { 
 
    float:left; 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 180px; 
 
    color: #454545; 
 
} 
 
.boxbox > .col-lg-6 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="wrapper2" style="height:160px;"> 
 
<div class="infobox" id="platform1"> 
 
<div class="boxbox"> 
 
    <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform1_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform1_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox" id="platform6"> 
 
<div class="boxbox"> 
 
    <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform6_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform6_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox" id="platform3"> 
 
<div class="boxbox"> 
 
    <div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform3_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform3_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox" id="platform5"> 
 
<div class="boxbox" id="platform5"> 
 
    <div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform5_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform5_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox" id="platform4"> 
 
<div class="boxbox"> 
 
    <div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform4_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform4_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox" id="platform2"> 
 
<div class="boxbox" id="platform2"> 
 
    <div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform2_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform2_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

Answer 1

クラスのコンテナinfobox5のあなたの直接の子は、あなたのjQueryのメソッドのためのCSSの色を上書きしている：私はすべての論文のスタイルを削除した後、ここで

はコードです。あなたは、まずそれを削除してから、以下に示すようにそれを使用する必要があります。

Note- .eq(index) is better suited for your query in contrast to :nth-of-type(index). You can try them both and see it for yourself.

ポインター：

• がに、不要なスタイルの多くが実装されますが、このクエリのために、とされている、あなたのCSSをクリーンアップします.boxboxクラスも独自のカラースタイルを実装しています。言及したように、divの子であるinfobox5も、親コンテナに実装されているJQueryのCSSをオーバーライドする独自のカラースタイルを実装しています。

$(".infobox5").eq(4).css("color", "green"); //Index starts from 0 for 1st element, 1 for 2nd and so on 4 for 5th element of type .infobox5

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
body { 
 
    color: #fff; 
 
    font-family: Roboto; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
h1 { 
 
    font-size: 1.2vw; 
 
} 
 

 
h3 { 
 
    font-size: 1.1vw!important; 
 
    font-weight: 100; 
 
    margin: 0; 
 
    padding: 5px; 
 
} 
 

 
.redSq { 
 
    background-color: #ff000a; 
 
    width: 117px; 
 
    height: 241px; 
 
    float: left; 
 
} 
 

 
.row { 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 180px; 
 
    color: #454545; 
 
    background-color: #dee9f3; 
 
    //border: solid 1px #454545; 
 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
 
    margin-bottom: 10px; 
 
} 
 

 
.row>.col-lg-6 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container>div { 
 
    padding: 15px; 
 
    margin: 5px; 
 
    flex: 0 0 calc(100% - 20px); 
 
    text-align: left; 
 
} 
 

 
td { 
 
    padding: 2px 2px; 
 
    text-align: center; 
 
    margin: 6px 0; 
 
    border: none; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    background-color: #454545; 
 
    font-weight: 500; 
 
    border-collapse: separate; 
 
    border-spacing: 0.3em 1.1em; 
 
    color: #fff; 
 
    border: 0; 
 
} 
 

 
p { 
 
    font-size: 1.2vw; 
 
} 
 

 
.boxes { 
 
    padding-top: 40px; 
 
    padding-left: 30px; 
 
    padding-right: 5%; 
 
    min-width: 200px; 
 
    float: left; 
 
    display: inline-block; 
 
} 
 

 
#line { 
 
    border-bottom: solid 1px #CCC; 
 
    margin-top: 0px; 
 
    padding-top: 15px; 
 
} 
 

 
.infobox { 
 
    float: left; 
 
    margin: 0; 
 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
 
    color: #454545; 
 
} 
 

 
.infobox1 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 100%; 
 
    margin: 0; 
 
} 
 

 
.infobox2 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 49%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
} 
 

 
.infobox3 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 32.33%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
} 
 

 
.infobox4 { 
 
    float: left; 
 
    //min-height:150px; 
 
    min-width: 23.9%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
} 
 

 
.infobox5 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 32.33%; 
 
    margin: 0 0.5% 0.7%; 
 
    //padding: 18px 0; 
 
} 
 

 
div.leftBox { 
 
    float: left; 
 
    width: 60%; 
 
    margin: 15px 0 0 25px; 
 
    font-size: 1.1vw; 
 
} 
 

 
div.rightBox { 
 
    float: left; 
 
    width: 60%; 
 
    margin: 15px 0 0 25px; 
 
    font-size: 1.1vw; 
 
} 
 

 
.infocontentheader { 
 
    //text-align: center; 
 
    line-height: 2.8; 
 
    //color: #fff; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
.infocontent { 
 
    text-align: center; 
 
    color: #fff; 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
div#facebook.infocontentheader { 
 
    background-color: #3c5999; 
 
} 
 

 
div#facebook.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
p#sTitle { 
 
    font-weight: 900; 
 
    font-size: 1.5vw; 
 
} 
 

 
p#bTitle { 
 
    //font-weight: 900; 
 
    font-size: 1.2vw; 
 
} 
 

 
p#facebook_spend, 
 
p#youtube_spend, 
 
p#search_spend, 
 
p#programmatic_spend, 
 
p#instagram_spend, 
 
p#twitter_spend { 
 
    font-weight: 900; 
 
    font-size: 1.3em; 
 
    margin: 10px 0 0 20px; 
 
} 
 

 
p#facebook_budget, 
 
p#youtube_budget, 
 
p#search_budget, 
 
p#programmatic_budget, 
 
p#instagram_budget, 
 
p#twitter_budget { 
 
    font-size: 1.2em; 
 
    margin: 10px 0 0 20px; 
 
} 
 

 
div#twitter.infocontentheader { 
 
    background-color: #1da1f2; 
 
} 
 

 
div#twitter.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
div#programmatic.infocontentheader { 
 
    background-color: #a15aa0; 
 
} 
 

 
div#display.parentbox { 
 
    background-color: #b3b3b3; 
 
    color: #fff; 
 
} 
 

 
div#video.parentbox { 
 
    background-color: #999999; 
 
    color: #fff; 
 
} 
 

 
div#mixed.parentbox { 
 
    background-color: #c1c1c1; 
 
    color: #fff; 
 
} 
 

 
#programmatic div.infocontentheader { 
 
    color: #fff; 
 
} 
 

 
div#programmatic.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
div#programmatic_value.infocontent { 
 
    color: #000; 
 
} 
 

 
div#youtube.infocontentheader { 
 
    background-color: #ff0102; 
 
} 
 

 
div#youtube.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
div#search.infocontentheader { 
 
    background-color: #cac9c2; 
 
} 
 

 
div#search.infobox img { 
 
    display: block; 
 
    margin: 10% auto 0 auto; 
 
} 
 

 
div#instagram.infobox { 
 
    background-color: #fff; 
 
} 
 

 
div#instagram.infobox img { 
 
    display: block; 
 
    margin: 10% auto 0 auto; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
#parent_div_1 { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    background-color: #757476; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
#parent_div_2 { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    background-color: #8D8D8D; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox { 
 
    width: 33.33%; 
 
    min-height: 150px; 
 
    /*background-color: #8D8D8D;*/ 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox1 { 
 
    width: 100%; 
 
    min-height: 150px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox2 { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox3 { 
 
    width: 33.33%; 
 
    min-height: 150px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.child_div_1 { 
 
    margin-top: 50px; 
 
    margin-left: 15%; 
 
    margin-bottom: 0px; 
 
    text-align: left; 
 
} 
 

 
.child_div_2 { 
 
    margin-left: 15%; 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    text-align: left; 
 
} 
 

 
.child_budget { 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    padding-left: 15%; 
 
    text-align: left; 
 
    float: left; 
 
} 
 

 
.child_spend { 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    padding-right: 15%; 
 
    text-align: left; 
 
    float: right; 
 
} 
 

 
.child_title { 
 
    margin-top: 50px; 
 
    margin-bottom: 0px; 
 
    text-align: center; 
 
} 
 

 
.child_budget_number { 
 
    padding-right: 20%; 
 
} 
 

 
.child_spend_number { 
 
    padding-left: 20%; 
 
} 
 

 
.boxbox { 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 160px; 
 
    font-size: 1.1vw; 
 
} 
 

 
.boxbox { 
 
    float: left; 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 180px; 
 
} 
 

 
.boxbox>.col-lg-6 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
<div id="wrapper2" style="height:160px;"> 
 
<div class="infobox infobox5" id="platform1"> 
 
<div class="boxbox"> 
 
    <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform1_value1">353</div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform1_value2">1,634</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox hidden" id="platform6"> 
 
<div class="boxbox" style="color: rgb(255, 255, 255);"> 
 
    <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform6_value1"></div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform6_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox infobox5" id="platform5"> 
 
<div class="boxbox" > 
 
    <div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform5_value1">706</div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform5_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox infobox5" id="platform3"> 
 
<div class="boxbox" id="platform3" > 
 
    <div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform3_value1">404</div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform3_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox infobox5" id="platform4"> 
 
<div class="boxbox"> 
 
    <div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform4_value1">353</div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform4_value2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="infobox infobox5" id="platform2"> 
 
<div class="boxbox" id="platform2" > 
 
    <div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;"> 
 
    <img src=""> 
 
    </div> 
 
    <div class="col-lg-6" style="float: left;"> 
 
    <div class="container"> 
 
     <div id="sTitle">value1<br> 
 
     <div id="platform2_value1">404</div> 
 
     </div> 
 
     <div id="bTitle">value2<br> 
 
     <div id="platform2_value2">6,364</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

Answer 2

使用：element.eq（N）ここでnは要素のインデックス値です

Answer 3

これはうまくいきますが、このインラインスタイルstyle="color: rgb(255, 255, 255);"には白色が追加されており、別の色を追加する.boxboxにCSSスタイルがあります。

$(".infobox5:nth-of-type(3)").css("color", "#fff");

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
body { 
 
    color: #fff; 
 
    font-family: Roboto; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
h1 { 
 
    font-size: 1.2vw; 
 
} 
 

 
h3 { 
 
    font-size: 1.1vw!important; 
 
    font-weight: 100; 
 
    margin: 0; 
 
    padding: 5px; 
 
} 
 

 
.redSq { 
 
    background-color: #ff000a; 
 
    width: 117px; 
 
    height: 241px; 
 
    float: left; 
 
} 
 

 
.row { 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 180px; 
 
    color: #454545; 
 
    background-color: #dee9f3; 
 
    //border: solid 1px #454545; 
 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
 
    margin-bottom: 10px; 
 
} 
 

 
.row>.col-lg-6 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container>div { 
 
    padding: 15px; 
 
    margin: 5px; 
 
    flex: 0 0 calc(100% - 20px); 
 
    text-align: left; 
 
} 
 

 
td { 
 
    padding: 2px 2px; 
 
    text-align: center; 
 
    margin: 6px 0; 
 
    border: none; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    background-color: #454545; 
 
    font-weight: 500; 
 
    border-collapse: separate; 
 
    border-spacing: 0.3em 1.1em; 
 
    color: #fff; 
 
    border: 0; 
 
} 
 

 
p { 
 
    font-size: 1.2vw; 
 
} 
 

 
.boxes { 
 
    padding-top: 40px; 
 
    padding-left: 30px; 
 
    padding-right: 5%; 
 
    min-width: 200px; 
 
    float: left; 
 
    display: inline-block; 
 
} 
 

 
#line { 
 
    border-bottom: solid 1px #CCC; 
 
    margin-top: 0px; 
 
    padding-top: 15px; 
 
} 
 

 
.infobox { 
 
    float: left; 
 
    margin: 0; 
 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
 
    color: #454545; 
 
} 
 

 
.infobox1 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 100%; 
 
    margin: 0; 
 
} 
 

 
.infobox2 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 49%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
} 
 

 
.infobox3 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 32.33%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
} 
 

 
.infobox4 { 
 
    float: left; 
 
    //min-height:150px; 
 
    min-width: 23.9%; 
 
    margin: 0 0.5%; 
 
    //padding: 18px 0; 
 
} 
 

 
.infobox5 { 
 
    float: left; 
 
    min-height: 150px; 
 
    min-width: 32.33%; 
 
    margin: 0 0.5% 0.7%; 
 
    //padding: 18px 0; 
 
} 
 

 
div.leftBox { 
 
    float: left; 
 
    width: 60%; 
 
    margin: 15px 0 0 25px; 
 
    font-size: 1.1vw; 
 
} 
 

 
div.rightBox { 
 
    float: left; 
 
    width: 60%; 
 
    margin: 15px 0 0 25px; 
 
    font-size: 1.1vw; 
 
} 
 

 
.infocontentheader { 
 
    //text-align: center; 
 
    line-height: 2.8; 
 
    //color: #fff; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
.infocontent { 
 
    text-align: center; 
 
    color: #fff; 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
div#facebook.infocontentheader { 
 
    background-color: #3c5999; 
 
} 
 

 
div#facebook.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
p#sTitle { 
 
    font-weight: 900; 
 
    font-size: 1.5vw; 
 
} 
 

 
p#bTitle { 
 
    //font-weight: 900; 
 
    font-size: 1.2vw; 
 
} 
 

 
p#facebook_spend, 
 
p#youtube_spend, 
 
p#search_spend, 
 
p#programmatic_spend, 
 
p#instagram_spend, 
 
p#twitter_spend { 
 
    font-weight: 900; 
 
    font-size: 1.3em; 
 
    margin: 10px 0 0 20px; 
 
} 
 

 
p#facebook_budget, 
 
p#youtube_budget, 
 
p#search_budget, 
 
p#programmatic_budget, 
 
p#instagram_budget, 
 
p#twitter_budget { 
 
    font-size: 1.2em; 
 
    margin: 10px 0 0 20px; 
 
} 
 

 
div#twitter.infocontentheader { 
 
    background-color: #1da1f2; 
 
} 
 

 
div#twitter.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
div#programmatic.infocontentheader { 
 
    background-color: #a15aa0; 
 
} 
 

 
div#display.parentbox { 
 
    background-color: #b3b3b3; 
 
    color: #fff; 
 
} 
 

 
div#video.parentbox { 
 
    background-color: #999999; 
 
    color: #fff; 
 
} 
 

 
div#mixed.parentbox { 
 
    background-color: #c1c1c1; 
 
    color: #fff; 
 
} 
 

 
#programmatic div.infocontentheader { 
 
    color: #fff; 
 
} 
 

 
div#programmatic.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
div#programmatic_value.infocontent { 
 
    color: #000; 
 
} 
 

 
div#youtube.infocontentheader { 
 
    background-color: #ff0102; 
 
} 
 

 
div#youtube.infobox img { 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
div#search.infocontentheader { 
 
    background-color: #cac9c2; 
 
} 
 

 
div#search.infobox img { 
 
    display: block; 
 
    margin: 10% auto 0 auto; 
 
} 
 

 
div#instagram.infobox { 
 
    background-color: #fff; 
 
} 
 

 
div#instagram.infobox img { 
 
    display: block; 
 
    margin: 10% auto 0 auto; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
#parent_div_1 { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    background-color: #757476; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
#parent_div_2 { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    background-color: #8D8D8D; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox { 
 
    width: 33.33%; 
 
    min-height: 150px; 
 
    /*background-color: #8D8D8D;*/ 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox1 { 
 
    width: 100%; 
 
    min-height: 150px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox2 { 
 
    width: 50%; 
 
    min-height: 150px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.parentbox3 { 
 
    width: 33.33%; 
 
    min-height: 150px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.child_div_1 { 
 
    margin-top: 50px; 
 
    margin-left: 15%; 
 
    margin-bottom: 0px; 
 
    text-align: left; 
 
} 
 

 
.child_div_2 { 
 
    margin-left: 15%; 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    text-align: left; 
 
} 
 

 
.child_budget { 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    padding-left: 15%; 
 
    text-align: left; 
 
    float: left; 
 
} 
 

 
.child_spend { 
 
    margin-top: 10px; 
 
    margin-bottom: 40px; 
 
    padding-right: 15%; 
 
    text-align: left; 
 
    float: right; 
 
} 
 

 
.child_title { 
 
    margin-top: 50px; 
 
    margin-bottom: 0px; 
 
    text-align: center; 
 
} 
 

 
.child_budget_number { 
 
    padding-right: 20%; 
 
} 
 

 
.child_spend_number { 
 
    padding-left: 20%; 
 
} 
 

 
.boxbox { 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 160px; 
 
    font-size: 1.1vw; 
 
} 
 

 
.boxbox { 
 
    float: left; 
 
    display: table; 
 
    width: 99.8%; 
 
    height: 180px; 
 
} 
 

 
.boxbox>.col-lg-6 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
<div id="wrapper2" style="height:160px;"> 
 
    <div class="infobox infobox5" id="platform1"> 
 
    <div class="boxbox" > 
 
     <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;"> 
 
     <img src=""> 
 
     </div> 
 
     <div class="col-lg-6" style="float: left;"> 
 
     <div class="container"> 
 
      <div id="sTitle">value1<br> 
 
      <div id="platform1_value1">353</div> 
 
      </div> 
 
      <div id="bTitle">value2<br> 
 
      <div id="platform1_value2">1,634</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="infobox hidden" id="platform6"> 
 
    <div class="boxbox" > 
 
     <div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;"> 
 
     <img src=""> 
 
     </div> 
 
     <div class="col-lg-6" style="float: left;"> 
 
     <div class="container"> 
 
      <div id="sTitle">value1<br> 
 
      <div id="platform6_value1"></div> 
 
      </div> 
 
      <div id="bTitle">value2<br> 
 
      <div id="platform6_value2"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="infobox infobox5" id="platform5"> 
 
    <div class="boxbox" > 
 
     <div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;"> 
 
     <img src=""> 
 
     </div> 
 
     <div class="col-lg-6" style="float: left;"> 
 
     <div class="container"> 
 
      <div id="sTitle">value1<br> 
 
      <div id="platform5_value1">706</div> 
 
      </div> 
 
      <div id="bTitle">value2<br> 
 
      <div id="platform5_value2"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="infobox infobox5" id="platform3"> 
 
    <div class="boxbox" id="platform3" > 
 
     <div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;"> 
 
     <img src=""> 
 
     </div> 
 
     <div class="col-lg-6" style="float: left;"> 
 
     <div class="container"> 
 
      <div id="sTitle">value1<br> 
 
      <div id="platform3_value1">404</div> 
 
      </div> 
 
      <div id="bTitle">value2<br> 
 
      <div id="platform3_value2"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="infobox infobox5" id="platform4"> 
 
    <div class="boxbox" > 
 
     <div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;"> 
 
     <img src=""> 
 
     </div> 
 
     <div class="col-lg-6" style="float: left;"> 
 
     <div class="container"> 
 
      <div id="sTitle">value1<br> 
 
      <div id="platform4_value1">353</div> 
 
      </div> 
 
      <div id="bTitle">value2<br> 
 
      <div id="platform4_value2"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="infobox infobox5" id="platform2"> 
 
    <div class="boxbox" id="platform2" > 
 
     <div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;"> 
 
     <img src=""> 
 
     </div> 
 
     <div class="col-lg-6" style="float: left;"> 
 
     <div class="container"> 
 
      <div id="sTitle">value1<br> 
 
      <div id="platform2_value1">404</div> 
 
      </div> 
 
      <div id="bTitle">value2<br> 
 
      <div id="platform2_value2">6,364</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>