Question

我正在尝试创建一个只有在将文本附加到某个高度之后才能滚动的div。我使用jquery检查高度，每次都返回零。有什么建议吗？

HelpOverlay.prototype.buildContent = function(helpMappings){
this.content = $('<div class="content"></div>');
var table = $('<table></table>');
table.append($('<tr><td class="key"><h3>Key</h3></td><td class="command"><h3>Command</h3></td></tr>'));
this.content.append(table);
for (var whichCategory = 0; whichCategory < helpMappings.categories.length; whichCategory++) {
    var category = helpMappings.categories[whichCategory];
    var categoryDiv = $('<div class="category">' + category.category + '</div>');
    this.content.append(categoryDiv);
    var categoryTable = $('<table></table>');
    for (var whichMapping = 0; whichMapping < category.mappings.length; whichMapping++) {
        var mappings = category.mappings[whichMapping];
        var row = $('<tr></tr>');
        var keyCell = $('<td class="key">' + mappings.key + '</td>');
        var commandCell = $('<td class="command">' + mappings.command + '</td>');
        row.append(keyCell);
        row.append(commandCell);
        categoryTable.append(row);

    }
    this.content.append(categoryTable);
}

this.helpOverlay.append(this.content);
console.log(this.content.height());
}

console.log（this.content.height（））返回零。

Answer 1

参考这一行：

this.helpOverlay.append(this.content);

this.helpOverlay已经是DOM的一部分吗？任何未插入DOM的元素都将返回0表示高度和宽度，直到插入它为止。

修改

this.content.css( 'display', 'none' ).appendTo( 'body' ); var dims = { 'height': this.content.height( ), 'width': this.content.width( ) }; this.content.detach( );

Answer 2

作为旁注，如果您将元素创建传递给另一个jQuery方法，则不需要在$（）中包装元素。这是你上面的代码......

table.append($('<tr><td class="key"><h3>Key</h3></td><td class="command"><h3>Command</h3></td></tr>'));

但是你可以用这种方式编写它（它会更有效率执行）并且它仍然可以完全相同，除了少量调用$（）......

table.append('<tr><td class="key"><h3>Key</h3></td><td class="command"><h3>Command</h3></td></tr>);

在追加到另一个div后得到JQuery .height（）会返回0

2 个答案: