Как позволить 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> 

В настоящее время я могу только добавить фиксированный 200px к моему contentHeight, но я нужно, чтобы он был более указан на основе строк элементов, которые я мог бы создать из базы данных. Мой вопрос в том, как можно позволить 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().