Question

我是Jquery的新手，并尝试在JqueryUI Display Grid上关注一个示例，并将其放在div上。

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

JS代码：

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

HTML code：

<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添加固定的200px，但我需要根据我可以从数据库生成的项目行进行更多指定。我的问题是，如何让demoContent根据可能存在的图像行数来“增长”其高度（比如每行最多可包含5个图像）？

非常感谢。

Answer 1

您应该调用slideDown动画，如下所示：

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

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

Answer 2

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

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

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

2 个答案: