如何让 div 基于 Jquery 可排序网格的高度增长？

Question

我是 Jquery 的新手，并尝试在 JqueryUI Display Grid 上遵循示例，并将其放在 div 上。

所以代码基本上是这样的：

JS代码：

$('#demoList').sortable();
$('#demoList').disableSelection();
var contentHeight  = $('#demoContent').height() + 200; 
$('#demoContent').animate({height: contentHeight});

HTML 代码：

<div id="demoContent">
        <ul id="demoList">
            <!-- <li> items generated based on the items from MySql -->
            <li class="ui-state-default"><img src="1.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="2.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="3.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="4.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="5.jpg" width="100px" height="100px"></li>
            <!-- There could be more than 5 images... -->
        </ul>
</div>

目前我只能向我的contentHeight 添加一个固定的 200 像素，但我需要根据我可以从数据库生成的项目行来更详细地指定它。我的问题是，如何让demoContent 根据可能存在的图像行数“增长”其高度（例如，如果每行最多可以包含 5 个图像）？

非常感谢。

Answer 1

如果我理解正确，这与 javascript 无关 :) 你只需要更清晰并删除这个 height() 东西。

    <div id="demoContent">
           <ul id="demoList">
                    <!-- items -->
           </ul>
           <div style="clear: both;"> </div>
    </div>

Answer 2

你应该调用slideDown动画，像这样：

$('#demoContent').slideDown();

如果要获取网格的高度，请致电$('#demoList').height()。