添加到DOM的元素在jQuery中沒有寬度或高度？

-4

我已經在DOM中添加了塊級元素，例如p標記。它的尺寸應該自動計算（例如自動）。但是，我不能用jQuery檢索它的高度，至少在最初時是這樣。經過一段時間（大概是一些佈局處理已經發生），我可以檢索高度。添加到DOM的元素在jQuery中沒有寬度或高度？

除了將元素添加到DOM中，爲了使元素的實際可測量高度可檢索，還需要進行什麼操作？

具體而言，我有一個select元素，其中一些option元素將圖像URL數據附加到它們中的每個元素。我稱之爲image-picker plugin，讀取option標籤數據，隱藏select元件，並接通選項到容器中與如下所示div元素：

<div class='container' style='width:800px'> 
    <div class='convertedOptionElement' style='width:33.33%'> 
     <div class='thumb' style='width:100%'> 
      <img src="https://lh3.ggpht.com/hhG6g0m8Q6QqZnloQJHV9uXFdsDjpzD0vJdkbra5e_PiwOjVXuBdVR0D2L0RPmwb1zw=h900"> 
      <p>Image Title</p> 
     </div> 
    </div> 
</div>

所以有我有一個固定寬度的容器，這將是填充寬度爲33.33％的div元素（生成3列）。每個div代表轉換的選項元素之一。在其中的每一箇中，都有一個寬度爲100％的div元素，其中包含img和p標記。

此外，我正在使用imagesLoaded插件和砌體插件來佈置圖像。在加載每個圖像後運行的imagesLoaded progress事件中，我可以清楚地看到img元素具有非零高度和寬度。但是，它的容器不包含，也不包含p標籤。

唯一特殊的是可能發生的是，創建與所述圖像拾取器插件中的元素之後立刻，我拆卸它們與$('.convertedOptionElement').detach()，然後在progress事件imagesLoaded，這觸發因爲每個圖像加載，我將它們追加到容器中，並致電masonry.appendedmethod，以便執行佈局。這就是問題出現的地方，因爲儘管DOM中的所有東西都存在，但計算出的高度爲零。

請注意即使我提供了確切的寬度（例如250px而不是33.33％和100％），然後在那個非常相同的加載事件處理程序中，我通過計算jQuery中的縮放高度來顯式設置jQuery中的寬度和高度現有的圖像尺寸（即所有父元素都有明確的尺寸）...段落標籤仍然具有零高度。

這是我的代碼，但這是工作。它不是在我正在使用的確切環境中工作，但我無法弄清楚爲什麼。

來源

2015-11-30 Triynko

從你的代表來看，你已經在這裏呆了足夠長的時間，並且看到了足夠的問題，知道這不是如何完成的。我們需要看到你的代碼開始能夠診斷任何問題。 –

不，這是關於如何計算高度以及何時可檢索的基本問題。如果一個元素實際上已經被添加到DOM中，那麼在什麼情況下它的高度將爲零或者jQuery無法挽回。 – Triynko

一般而言，當沒有內容或樣式時，它沒有尺寸：http://jsfiddle.net/p7cgahro/ –

鑑於你的代碼：

$(document).append('<p>Hello</p>'); 
console.log($(document).find('p').height()); //zero, why?

您試圖追加HTML到document這是無效的。使用body元素來代替：

$('body').append('<p>Hello</p>'); 
console.log($('body').find('p').height());

Working example

來源

2015-11-30 16:49:19

這只是一個例子，不能從字面上理解爲添加到文檔中。 – Triynko

@Triynko **您需要發佈一個代碼示例，演示您在說什麼，因爲Rory提供的示例反駁了您的說法。 – j08691

的問題是，有一個父元素「顯示：無;」，這是我沒想到它有。

事實證明，在對話框上調用引導程序的modal('show')之後，它實際上不會立即改變任何內容。

例如，調用modal('show')後，對話框仍然有CSS類fade（不in類），它的顯示風格依舊none。一段時間後，in類被添加，它基本上覆蓋了fade類的零不透明度並將其設置爲1（使用CSS動畫）。 display:none風格也被刪除。

本質上，問題歸結爲父元素有display:none和opacity:0這一事實，此時我們正在進行測量。尤其值得注意的是，這個數字已經被忽略了。

有趣的是，這個問題本來可以在我的問題的原始版本中直接回答，沒有一行代碼，因爲我只是問「爲了使元素實際可測量而發生了什麼，除了添加它到DOM，爲了它的計算高度是可檢索的？「

答案是......沒有父元素可以顯示「無」。

來源

2015-11-30 21:41:51 Triynko

添加到DOM的元素在jQuery中沒有寬度或高度？

回答

相關問題