jQuery: Group a variable number of Elements

Currently i'm stuck at the following Problem:

I try to group a variable number of Elements into a wrapper-Element. All my Elements are floated and variable in width. If any Element reaches the right side of the viewport a new group should be generated.

This is what i have so far:

JS Fiddle:

http://jsfiddle.net/FcRHf/1/ (Note: Console Output)

JS (jQuery)

jQuery(document).ready(function($) {

    var sum = 0;
    var max = $('li').length;
    var total = $('ul').innerWidth();
    var openRow = 'open';

    var closeRow = 'close';

    for (var i = 0; i < max; i++) {    
        // First iteration
        if (i == 0) {
            console.log(openRow);
        };

        if (total < sum + $('li').eq(i).innerWidth()) {
            // Reset Counter
            sum = 0;

            // New Row
            console.log(closeRow);
            console.log(openRow);

        };        

        // Inrement Sum - Counter
        sum = $('li').eq(i-1).innerWidth() + sum;

        // Output
        console.log(i+'- Total: '+total+' Sum: '+sum+' Item:'+$('li').eq(i).innerWidth());

        // Last iteration
        if (i == max-1) {
            console.log(closeRow);
        };
    };
});

Html

<ul>
    <li>Lorem Ipsum dolor (0)</li>
    <li>Lorem Ipsum (1)</li>
    <li>Lorem Ipsum amte magor (2)</li>
    <li>Lorem dolor losabim (3)</li>
    <li>Oxygenium losa (4)</li>
    <li>Lorem Ipsum (5)</li>
    <li>Lorem Ipsum dolor (6)</li>
    <li>Lorem Ipsum sit (7)</li>
    <li>Lorem Ipsum amte magor mal mit längerem Titel (8)</li>
    <li>Lorem dolor losabim (9)</li>
    <li>Oxygenium losa (10)</li>
</ul>

CSS

ul li {padding:30px;background:#eee;outline:1px solid #ccc;float:left}

Produced Output

Depending on window width (Note: Console Output).

open
    0- Total: 1323 Sum: 205  Item: 217
    1- Total: 1323 Sum: 422  Item: 176
    2- Total: 1323 Sum: 598  Item: 266
    3- Total: 1323 Sum: 864  Item: 229
    4- Total: 1323 Sum: 1093 Item: 197
    5- Total: 1323 Sum: 1290 Item: 176
close
open
    6- Total: 1323 Sum: 176  Item: 217
    7- Total: 1323 Sum: 393  Item: 197
    8- Total: 1323 Sum: 590  Item: 428
    9- Total: 1323 Sum: 1018 Ite开发者_JAVA技巧m: 229
   10- Total: 1323 Sum: 1247 Item: 205
close

What i'm trying to get:

<!--The count of items per row depending on viewport width-->
<div class="row">
    <li>Lorem Ipsum dolor (0)</li>
    <li>Lorem Ipsum (1)</li>
    <li>Lorem Ipsum amte magor (2)</li>
    <li>Lorem dolor losabim (3)</li>
    <li>Oxygenium losa (4)</li>
</div>
<div class="row">
    <li>Lorem Ipsum (5)</li>
    <li>Lorem Ipsum dolor (6)</li>
    <li>Lorem Ipsum sit (7)</li>
    <li>Lorem Ipsum amte magor mal mit längerem Titel (8)</li>
</div>
<div class="row">
    <li>Lorem dolor losabim (9)</li>
    <li>Oxygenium losa (10)</li>
</div>

---

What you're trying to get is not semantic mark up as the LI's need to be wrapped in a UL. Surely you could just float all of the li's left and add a simple if statement which says:

$("li").each(function(){
if($(this).position().top == 0){
        this.addClass("row-1");
 }else if($(this).position().top > 0 && $(this).position().top <= 200){
    this.addClass("row-2");
 }})

... and so on. Your way seems overcomplicated - unless i've missed something!