为什么“$（element）.height（）”显示为0？

Question

我有这样的结构。一个有5张卡片的容器（5个元素，每个元素都有一个标题，内容和页脚）。页眉，页脚和内容具有静态高度，但卡本身具有动态高度（因为内容可以动态增长）。我试图使用css3添加动画，我需要在内容附加到卡片时获得卡片的高度。

这是代码中将内容附加到卡上的部分

function card_constructor(data) {
    $card = $(cards_template(data)); //pass data to template
    card_id = data.id;
    $contentJQuery = $card.find('.content');
    content = data.options;
    template = data.template;
    is_visible = true;
    if(content.length === 0) is_visible = false; //if no content available, do not show card
    //loop through content array in order to append its data to the card
    for (var d=0; d<content.length; d++) {

        $contentJQuery.append(template(content[d]));

    }

    console.log($card.height()); // here is where 0 is returned
   //also tried console.log($card) and that returns the card with all its       //content

}

我不知道为什么会发生这种情况..当我尝试直接从Chrome控制台获取高度时，它可以正常工作

Answer 1

因为在尝试从DOM中读取属性之前需要$(document).ready(function () { ... });。尺寸很可能尚未呈现。即在此函数中包装必要的代码，以便在执行代码之前为文档提供加载时间。或者，在结束</body>标记之前，将您的脚本添加到同一个标记中。