modulus in JS returns the remainder of the division - whatever is left
that couldn't be divided returning an integer.
1/4 = 0.25 -> 1%4 = 1
2/4 = 0.5 -> 2%4 = 2
3/4 == 0.75 -> 3%4 == 3
4/4 == 1 -> 4%4 == 0
5/4 == 1.25 -> 5%4 == 1
6/4 == 1.5 -> 6%4 == 2
and so on...
By using the modulus on the index you'll get an infinite sequence of
0,1,2,3 for example, which allows us to achieve the separation you
wanted.
This for example would recursively add one of four classes for every
element:
$('a').each(function(i){
var n = i % 4;
$(this).addClass(
n == 0 ? 'first' :
n == 1 ? 'second' :
n == 2 ? 'third' :
n == 3 ? 'fourth' : '');
});
we just add
var n = Math.floor(i/10) % 4;
because you want four different classes for every 10 elements. We
divide the index by 10, giving us 0.xx to 1 instead of 0 to 10, round
that down and apply the modulus to see which class suits.
As a last simple example, %2 can tell you which numbers are odd or
even:
1%2 == 1
2%2 == 0
3%2 == 1
4%2 == 0
377%2 == 1
5666%2 == 0
Hope this is not too confusing!
cheers,
- ricardo
On Mar 3, 12:21 am, Nic Hubbard <nnhubb...@gmail.com> wrote:
> Hi Ricardo,
>
> Could you explain why you did %4 for the n variable?
>
> On Feb 26, 12:16 pm, ricardobeat <ricardob...@gmail.com> wrote:
>
> > I like it cleaner:
>
> > $('a').each(function(i){
> > var n = Math.floor(i/10) % 4;
> > $(this).addClass(
> > n == 0 ? 'first' :
> > n == 1 ? 'second' :
> > n == 2 ? 'third' :
> > n == 3 ? 'fourth' : '');
>
> > });
>
> > or
>
> > var classNames = ['first', 'second', 'third', 'fourth'];
> > $('a').each(function(i){
> > var n = Math.floor(i/10) % 4;
> > $(this).addClass(classNames[n]);
>
> > });
>
> > This also gives you support for infinite expansion. An index of 45
> > will evaluate to class 'first', 51 to 'second', 85 to 'first' again
> > and so on.
>
> > cheers,
> > - ricardo
>
> > On Feb 26, 6:29 am, mkmanning <michaell...@gmail.com> wrote:
>
> > > And just as an exercise, here's the 'jQuery' way chained:
>
> > > $('a').filter(':lt(10)').addClass('first').end().filter(':gt(9):lt
> > > (10)').addClass('second').end().filter(':gt(19):lt(10)').addClass
> > > ('third').end().filter(':gt(29)').addClass('fourth');
>
> > > Not really any speed gain though.
>
> > > On Feb 26, 1:21 am, mkmanning <michaell...@gmail.com> wrote:
>
> > > > It's possible. Here's a more traditional way:
>
> > > > $('a').each(function(i,link){
> > > > if(i<10){$(link).addClass('first');}
> > > > else if (i>9 && i<20){$(link).addClass('second');}
> > > > else if (i>19&&i<30){$(link).addClass('third');}
> > > > else if (i>29&&i<40){$(link).addClass('fourth');}
> > > > })
>
> > > > Here's a more 'jQuery' way:
> > > > $('a:lt(10)').addClass('first');
> > > > $('a:gt(9):lt(10)').addClass('second');
> > > > $('a:gt(19):lt(10)').addClass('third');
> > > > $('a:gt(29):lt(10)').addClass('fourth');
>
> > > > Which is better? The first takes a little over half as long as the
> > > > second.
>
> > > > On Feb 25, 10:45 pm, Nic Hubbard <nnhubb...@gmail.com> wrote:
>
> > > > > I have a list of links, around 40 of them. I want to apply classes to
> > > > > groups of them. So, items 1-10 I want to apply a class to, then
> > > > > 11-20, then 21-30 and 31-40, each of these groups should have their
> > > > > own class.
>
> > > > > Is something like this possible? I looked through the jQuery
> > > > > selectors and could not find a solution.
