jQuery数据库冲突

Question

当我添加更多行时，左侧的击球手列也会根据行调整其高度。为了实现这一点，我使用了一个小脚本。当页面是静态的时它工作得很好。

当从数据库中检索Rows时，有时会加载jquery并且根据行数设置击球手列的高度，但有时会失败并且不会根据行数设置击球手列的高度。

注意：页面每 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');
});