Question

当我添加更多行时，左侧的击球手列也将根据行调整其高度。为了达到这个目的，我使用了一个小脚本。当页面是静态的时，它很有效。

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

注意：页面每30秒刷新一次。如果jquery在该实例上没有加载，则会在下一个数据库ping上加载。

     <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');
});

Jquery数据库冲突

1 个答案: