獲取JQuery .height（）追加到另一個div後返回0

我想創建一個div，只有當它高於一定的高度後，才能滾動，並附加文本。我使用jquery檢查高度，並且每次都返回零。有什麼建議麼？獲取JQuery .height（）追加到另一個div後返回0

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（））返回零。

來源

2011-06-07 johosher

你能發佈你的代碼嗎 – lockdown 2011-06-07 23:51:38

它對我有用。你可以發佈一個jsfiddle它不起作用嗎？（http://jsfiddle.net/2awqM/1/） – 2011-06-07 23:52:22

你的CSS可以派上用場。 – Zlatev 2011-06-08 04:26:09

在談到這一行：

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();

來源

2011-06-08 17:21:32 KOGI

不，它不是DOM的一部分。這是我的問題。我想知道在將它添加到dom之前是否還有高度？ – johosher 2011-06-08 18:06:10

不，但你可以做的是設置css'display：none'，將它添加到'$（'body'）'，獲取高度，然後調用'.detach（）'來再次從DOM中移除它（如果你只是將它重新插入到其他地方，你可能不需要做最後一部分，因爲'.append（）'將它移動到另一個元素只是移動它。不過，當你準備好時，不要忘記用'display：block'（或者你正在使用的任何顯示模式）重新顯示元素。（'display'，'none'）.appendTo（'body'）;' 'var dims = {'height'：this.content.height（），width'：this.content .width（）};' 'this.content.detach（）;' – KOGI 2011-06-08 18:20:16

Thankyou爲此，我從來沒有意識到:) – 2012-08-22 02:22:14

作爲一個側面說明，你不需要包裝在$（），如果你將它傳遞給另一個jQuery的方法元素創建。這是從上面的代碼......

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

但是你可以把它寫（這將是更高效的執行），這樣，它仍然能工作完全一樣，除具有1次至$少調用（） ...

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

來源

2011-06-08 17:23:11 KOGI

獲取JQuery .height（）追加到另一個div後返回0

回答

相關問題