Divide columns into groups (rows) based on their cumulative width with jquery
<p>I have a number of columns (of varying widths) being generated and I need to divide them into groups or rows based on their widths. Every time the cumulative width of the columns reaches 100% I'd like to group those columns in a new div. </p>

<p>I asked a friend to look into this for me and he came back with this, but I still can't get it working. If anyone can offer any help it would be much appreciated.</p>

<pre><code>$.fn.gridRows = function() {
    var cumulativeWidth = 0;
    var items = [];
    $('.column',this).each(function(index){
        var col = $(this);
        col.data('index', index);
        var percentageWidth = (100 * parseFloat(col.css('width')) / parseFloat(col.parent().css('width')));
        cumulativeWidth += percentageWidth;
        items.push(index);
        if(cumulativeWidth &gt;= 100){
            if(items.length == 1){
                col.wrap('&lt;div&gt;&lt;/div&gt;');
            }else{
                var selector = '*' + items.join('][data-index=').substring(1) +']';
                $(selector).wrap('&lt;div&gt;&lt;/div&gt;');
            }
            items = [];
            cumulativeWidth = 0;
        }
    });
}

$(document).ready(function() {
    $('body .group').gridRows();
});
</code></pre>
