Creative Enemy Creative Enemy - 7 months ago 32
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

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>