jquery數據庫衝突

Question

當我添加更多的行時，左側的batsman列也會根據行調整其高度。爲了達到這個目的，我使用了一個小腳本。當頁面是靜態的時它運行良好。

當從數據庫中檢索行時，有時jquery加載和batsman列的高度根據行數設置，但有時會失敗並且batsman列的高度不根據行數設置。

注意：頁面每30秒刷新一次。如果jquery不加載該實例，它會加載下一個數據庫ping。

這是小提琴。 https://jsfiddle.net/my1mt971/1/

 <div class="bat_slot1"> 
    <div class="batsman1"> 
     <div class="batty1"> 
      <div id="myBlueDiv1"> 
       <p>Batsman</p> 
      </div> 

     </div> 

    </div> 

    <div class="row2"> 
     <ul> 
      <li style="width: 32px;"><img src="images/new_wicketl.png" width="15" 
       height="15" /></li> 
      <li style="width: 202px;">Row 1</li> 
      <li style="width: 54px;"><img src="images/gold_player.png" width="22" 
       height="20" /></li> 
      <li style="width: 127px;">CSK</li> 
      <li style="width: 35px; color: #00f033">25</li> 


     </ul> 

    </div> 

    <div class="row2"> 
     <ul> 
      <li style="width: 32px;"><img src="images/new_wicketl.png" width="15" 
       height="15" /></li> 
      <li style="width: 202px;">Row 2</li> 
      <li style="width: 54px;"><img src="images/gold_player.png" width="22" 
       height="20" /></li> 
      <li style="width: 127px;">CSK</li> 
      <li style="width: 35px; color: #00f033">25</li> 


     </ul> 

    </div> 
    <div class="row2"> 
     <ul> 
      <li style="width: 32px;"><img src="images/new_wicketl.png" width="15" 
       height="15" /></li> 
      <li style="width: 202px;">Row 3</li> 
      <li style="width: 54px;"><img src="images/gold_player.png" width="22" 
       height="20" /></li> 
      <li style="width: 127px;">CSK</li> 
      <li style="width: 35px; color: #00f033">25</li> 


     </ul> 

    </div> 

    <div class="row2"> 
     <ul> 
      <li style="width: 32px;"><img src="images/new_wicketl.png" width="15" 
       height="15" /></li> 
      <li style="width: 202px;">Row 4</li> 
      <li style="width: 54px;"><img src="images/gold_player.png" width="22" 
       height="20" /></li> 
      <li style="width: 127px;">CSK</li> 
      <li style="width: 35px; color: #00f033">25</li> 


     </ul> 

    </div> 

    <script>var divHeight = $('.bat_slot1').height(); 
    $('.batty1').css('min-height', divHeight+'px');</script> 

</div> 

CSS

@charset "utf-8"; 
/* CSS Document */ 

.my_team_players { width: 593px; height: 487px; padding-top: 0px; /* background: #F9ACAC; */ /* padding: 5px; */ border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-right: 4px solid #fff; border-top: 4px solid #fff;} 
.other_team_players { width: 593px; height: 487px; padding-top: 0px; /* background: #F9ACAC; */ /* padding: 5px; */ border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-right: 4px solid #fff; border-top: 4px solid #fff; margin-top: 262px;} 

.batsman1 { width:118px; height:auto; float:left; } 
.batty1 {width: 114px; 
height: 66px; 
background-color: #e34309;display: -webkit-flex; /* Safari */ 
    -webkit-align-items: flex-start; /* Safari 7.0+ */ 
} 


#myBlueDiv1 { 
    -webkit-align-self: center; /* Safari 7.0+ */ 
    align-self: center; 

color: #fff; font-size:13px; font-weight:bold; 
} 

#myBlueDiv1 p {  
color: #fff; font-size:13px; font-weight:bold;} 


.batty1 p {padding: 23px; 
font-family: "Open Sans"; 
font-size: 14px; text-align:center; } 


.row2 { width: 592px; height:32px; background: #2f5385;margin-top: 2px;} 
.row2 ul { list-style-type:none;margin: 0px; padding: 9px;} 
.row2 ul li { font-family:"Open Sans"; font-size:12px; color:#fff; float:left; font-weight: bold;} 


.bat_slot1 { width:600px; height:auto;} 

請幫助。 謝謝。

Answer 1

嘗試寫在$.ready() jQuery代碼，這樣所有的DOM元素加載第一那麼你的元素高度將設置類似，

$(function(){ 
    var divHeight = $('.bat_slot1').height(); 
    $('.batty1').css('min-height', divHeight+'px'); 
});