Question: I want to add a class to the first three database objects, then another class for the 4 to 6 objects and so on... 

I found ways to break the loop but I hope there are better ways to accomplish bunches of three than to have to hardcode a lot of loops?

I'm thankful for all help!

<http://jsfiddle.net/r61bce3z/>

this is the basics of the loop i have: 

```
var tableContent = '';

$.getJSON( '/users/insights', function( data ) {
userListData = data;
$.each(data, function(){
    tableContent += '<ul>';
    tableContent += '<li class="sub">' + this.date + '</li>';
    tableContent += '</ul>';
});

```

Answer: 
The `$.each()` method calls your function with an index for the element it is up to. So use that with a little arithmetic as an index into an array of class names:

```
var classes = ['class1', 'class2', 'class3', 'class4'];

$.getJSON( '/users/insights', function( data ) {
    userListData = data;
    $.each(data, function(i){
        tableContent += '<ul>';
        tableContent += '<li class="' + classes[Math.floor(i/3) % classes.length]
                        + '">' + this.date + '</li>';
        tableContent += '</ul>';
    });
});

```

Using `Math.floor(i/3)` gives you your groups of 3. Adding in `% classes.length` allows for if you have more groups of 3 than classes (so that you don't go past the end of the array of classes, it'll just start reusing the classes from the beginning of the array).
You can make it with some helper variables.

```
var tableContent = '';
var classIndex=-1;

$.getJSON( '/users/insights', function( data ) {
    userListData = data;
    $.each(data, function(index){
        if(index % 3 == 0) classIndex++;
        var css = classes[classIndex];
        tableContent += '<ul>';
        tableContent += '<li class="myClass' + classIndex + '">' + this.date + '</li>';
        tableContent += '</ul>';
    });
}

```