Need help with height() function and more...

Hello,

I have to measure, and add, the eight of each item (<li>) of a list (<ul>) and when the sum comes to 200px (or more) put all next <li> into a new list...

I've tried this :

$(document).ready(function() {
$('.list').each(function() {
h=0;
$(this).find('li').each(function() {
h = h + $(this).height();
if ( h >= 200 ){
$(this).nextAll().insertAfter($(this).parent('.list')).wrapAll('<ul class="list second_column"></ul>');
$(this).parent('.list').css("height", "200px");
h=0;
}
})
})
});


It doesn't work, '$(this).height()' isn't returning the <li> height, it returns 0...

I'm very knew to it...
any help would be appreciated.

Thanks a lot

 

$.height has a tendancy to be a bit crap in certain browsers. I would use $(this).css("height"); instead.

$(document).ready(function()
{
     var numLists = 1;

     $('.list').each(function()
     {
         var h = 0;
         $(this).find('li').each(function()
         {
             h += $(this).css("height");
             if(h > 199)
             {
                 //Im not 100% sure what your trying to do here but I think it can easily be cleaned up
                 //$(this).nextAll().insertAfter($(this).parent('.list')).wrapAll('<ul class="list second_column"></ul>');
                 
                 numLists++;
                 $(<.list parent>).append('<ul id="'+numLists'" class="list second_column"></ul>');
                 $("#"+numLists).append($(this));
                 $(this).parent('.list').css("height", "200px");
                 h = 0;
             }
         });
     });
});

Code (markup):

I hope that helps.

Thanks
Andrew

 

Just to add the <.list parent> is not some crazy jQuery code, just me for whatever that selector is id'/class'd.

Thanks
Andrew