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在更改内容后设置元素高度

回答

相关问题