jquery - 如何让 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>

目前我只能将固定的 200 像素添加到我的 contentHeight，但我需要它根据我可以从数据库生成的元素行进行更多指定。我的问题是，如何让 demoContent 根据可能存在的图像行数“增长”其高度(假设每行最多包含 5 张图像)？

非常感谢。

Answer 1

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

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