jQuery - splitting items by highlighting X amount of items one color, then the next amount another, etc (example included)

0
votes

Fiddle: http://jsfiddle.net/8xBeW/1/

In the fiddle example you can see the idea I'm kind of going for. Only instead of highlighting every 4 items, I'd like the list to calculate it as if I was splitting it into 4 equal parts. Now obviously it's not always going to be divisible by whatever number I put in, and that's fine. But here's a quick example of what I'd like:

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8

I'd like to take that list and put in a "4" and have the following output...

Item1 [highlighted 1st color]
Item2 [highlighted 1st color]
Item3 [highlighted 2nd color]
Item4 [highlighted 2nd color]
Item5 [highlighted 3rd color]
Item6 [highlighted 3rd color]
Item7 [highlighted 4th color]
Item8 [highlighted 4th color]

And if it was an odd list, for instance, if I wanted it split in 5, it would be 8/5 which is 1.6 so it would round up to 2, and highlight every 2 anyway right? Not really sure how to handle THAT... but that's why I'm here.

Any ideas? This is just a personal project I'm trying to do to separate a list of tasks and delegate them out to X amount of team members easily.

1
jquerylistitemcss-selectors

1 Answers

2
votes

Try something like this:

    var total = $("#list-for-testing li").length;
    var num = total / $el.val( );
    var current = 1;

    $('#list-for-testing li').each( function( i ) {
        if( i > ( current * num ) )
            current++;
        $(this).attr('class', 'selected' + current);
    } );

I used multiple classes to make it work (selected1, selected2, etc) but that should be enough to make it work from there.