Question

我有一个动态html表（从带有Jinja for循环的数据库文件中获取其内容）。第一列包含人物的图片和用户名。我想根据名为＆＃39; fitin＆＃39;的父div的固定高度调整用户名的字体大小，所以当名称很长时，它会变小而不是转到第二行。

这是我的HTML代码：

<tdody>
    {% for i in players %}
        <tr>
            <td>
                <div class='fitin'>                             <!-- in css file, .fitin {height: 50px;} -->
                    <div>
                        <img src=''> <p class='username'>{{ i.username }}</p>    <!-- in css file, p {display: inline;} -->
                    </div>
                </div>
            </td>
            <td>{{ i.join_date }}</td>
        </tr>
    {% endfor %}
</tbody>

和javascript代码：

$(document).ready(function() {
    $('table tr').each(function(){
        console.log($('.fitin').height());        // I get 50 for '.fitin'
        console.log($('.fitin div').height());    // and something like 33 for all the '.fitin div'
    });
});

现在我的问题是我无法在div内部获得正确的div高度＆＃39; fitin＆＃39;反映真实的高度，而不是每个行都得到一个固定的数字，即使显示的表包含很少的长用户名，坐在图片的下一行。

请你告诉我我做错了什么？

谢谢

Answer 1

您发布的代码不是HTML，它是您的模板代码。如果您将破坏的实例的实际HTML输出发布为JSFiddle，那将是理想的。

阅读完评论后，我立即了解您的问题。您始终获得第一个 .fitin div。这段代码可以使用：

$('table tr').each(function(){
    console.log($(this).find('.fitin').height());        // I get 50 for '.fitin'
    console.log($(this).find('.fitin div').height());    // and something like 33 for all the '.fitin div'
});

现在，您将引用每个 <tr>的孩子.fitin。

Answer 2

试试这个，让我们知道......

var cHeight1 = document.getElementsByClassName('.fitin').clientHeight;
var cHeight2 = document.getElementsByClassName('.fitin div').clientHeight;

或

var oHeight1 = document.getElementById('.fitin').offsetHeight;
var oHeight2 = document.getElementById('.fitin div').offsetHeight;

希望这会有所帮助..

动态表的单元格高度

这是我的HTML代码：

和javascript代码：

2 个答案: