Creative Enemy Creative Enemy - 1 year ago 348
jQuery Question

Total LI width calculate and set the parent UL or DIV

How to calculated Total LI width and set the width for parent div.

My example code:

<ul>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
<li>dsfdsfdsfds</li>
</ul>


Css Style :

ul li{width:400px;float:left;}

Answer Source

Use this code

<script type="text/javascript" src="public/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){      
$('.nested_li ul').each(function(){  
        var liItems = $(this);
        var Sum = 0;
        if(liItems.children('li').length >= 1){
         $(this).children('li').each(function(i, e){
                Sum += $(e).outerWidth(true);
         });
        $(this).width(Sum+1);
        } 
});

    });
</script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download