动态表格的单元格高度

Question

我有一个动态的html表（通过Jinja for loop从数据库文件获取其内容）。 第一列包含一个人的图片和用户名。 我想基于其名为“ fitin”的父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'fitin'中获得正确的div高度以反映实际高度，相反，即使显示的表中包含很少的长用户名，我也为每行获取一个固定的数字图片的下一行。

请您告诉我我做错了什么吗？

谢谢

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;

希望这可以帮助..