Получение JQuery.height() после добавления к другому div возвращает 0

Я пытаюсь создать div, который прокручивается только тогда, когда он выше определенной высоты после добавления к нему текста. Я проверяю высоту с помощью jquery и каждый раз возвращает ноль. Любые предложения?

HelpOverlay.prototype.buildContent = function(helpMappings){
this.content = $('');
var table = $('');
table.append($('<h3>Key</h3><h3>Command</h3>'));
this.content.append(table);
for (var whichCategory = 0; whichCategory < helpMappings.categories.length; whichCategory++) {
 var category = helpMappings.categories[whichCategory];
 var categoryDiv = $('<div>' + category.category + '</div>');
 this.content.append(categoryDiv);
 var categoryTable = $('');
 for (var whichMapping = 0; whichMapping < category.mappings.length; whichMapping++) {
 var mappings = category.mappings[whichMapping];
 var row = $('');
 var keyCell = $('' + mappings.key + '');
 var commandCell = $('' + mappings.command + '');
 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()) возвращает ноль.

2 ответа

В отношении этой строки:

this.helpOverlay.append(this.content);

Является ли this.helpOverlay уже частью DOM? Любой элемент, который не вставлен в DOM, будет возвращать 0 по высоте и ширине, пока не будет вставлен.

Edit:

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


В качестве побочного примечания вам не нужно обматывать создание элемента в $(), если вы передаете его другому методу jQuery. Это ваш код сверху...

table.append($('<h3>Key</h3><h3>Command</h3>'));

Но вы могли бы написать это (и это было бы более эффективное выполнение) таким образом, и он все равно будет работать точно так же, за исключением того, что с 1 меньше вызова метода $()...

table.append('<h3>Key</h3><h3>Command</h3>);

licensed under cc by-sa 3.0 with attribution.