JQuery在更改內容後設置元素高度

我想在Ajax數據加載到元素後自動調整div元素的大小。到目前爲止，我沒有問題，使得它與JQuery在更改內容後設置元素高度

success: function (data) { 
       var oldSize = $("#DivPreview").height(); 
       $("#DivPreview").html(data.d); 
       var newSize = $("#DivPreview").height(); 
       $("#DivPreview").height(oldSize).animate({ height: newSize }); 
}

高但那隻能是第一次，這oldSize和newSize後同樣沒有關係什麼，它不會使div小
有誰知道我可以如何平滑地動態改變Height屬性？

如果這是非常有用的，你知道我想，當你想創建一個新的問題"Questions that may already have your answer"箱

感謝您的幫助

來源

2016-06-14 Robin Schambach

使用scrollHeight代替。 Height()設置了css值，因此不會在第二次更新。由於高度設置在父級上，因此您需要計算內容的大小。

function resizeDiv (elements) { 
 
    // This will actually just get the css value (which was set last time) 
 
    var oldSize = $("#DivPreview").height(); 
 
    $("#DivPreview").html(elements); 
 
    // Since height is already set, we calculate the size of the contents instead. 
 
    var newSize = $("#DivPreview ul")[0].scrollHeight; 
 
    $("#DivPreview").height(oldSize).animate({ height: newSize }); 
 
} 
 

 
$('#DivLong, #DivShort').click(function(){ 
 
    var $el = $(this).html(); 
 
    resizeDiv($el); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="DivPreview"> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul> 
 
</div> 
 

 
<div id="DivShort"> 
 
<ul> 
 
    <li>One (click me)</li> 
 
    <li>Two</li> 
 
</ul> 
 
</div> 
 

 
<div id="DivLong"> 
 
<ul> 
 
    <li>One (click me)</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Siz</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
</ul> 
 
</div>

見下文回答的更多信息。

jQuery height() not changing on resize

來源

2016-06-14 07:44:27 smoksnes

非常感謝。當我第一次點擊'DivShort'時，它變小了，但是當我點擊'DivLong'後，點擊'DivShort'時它仍然保持相同的大小。你明白我想說什麼嗎？ sry for bad english ^^「 –

對不起，我不是很明白，你是否正在嘗試上面的代碼片段？首先，點擊DivShort，然後點擊DivLong，它應該調整到最後點擊的div的大小 – smoksnes

是的，但是當你再次點擊DivShort時它會保持高度，並且不會再變小。我剛剛找到另一個解決方案...當我使用$（「#DisPreview」）。removeAttr（'style'）;'at該功能的開始一切運作良好 –

我創造某種預覽的新話題，就像這個網頁上/建議將建議把oldSize在全局變量或把它放在一個#DivPreview在$.data下列方式使之持續遍佈時間：

success: function (data) { 

    var oldSize = $("#DivPreview").data("oldSize") != null ? $("#DivPreview").data("oldSize") : $("#DivPreview").height(); 
    $("#DivPreview").data("oldSize", oldSize); 

    $("#DivPreview").html(data.d); 
    var newSize = $("#DivPreview").height(); 
    $("#DivPreview").height(oldSize).animate({ height: newSize }); 
}

來源

2016-06-14 07:42:26 vijayP

JQuery在更改內容後設置元素高度

回答

相關問題