Question

I’ve managed to simulate a slideshow nested inside tabs – where the next button on the last slide in a tab can take you through to the next tab.

I’ve done it using nth-child selectors – however ive had to literally punch in a function for each nth child – eg:

if (nth-child(1)) {}; 
else if (nth-child(2)) {}; 
else is (nth-child(3)){;

etc etc

is there a way to use a range of values for the nth-child selector – something like:

 if (nth-child(1-3){};

or

  if (nth-child(1,2,3){};

something like that.

full code is here http:here

thanks!

Answer 1

Ok!

Use the index() method: http://jsfiddle.net/fPvJK/8/

var selector = "#tab" + (Math.floor($(this).index()/3)+1);
$("#tab1, #tab2, #tab3").removeClass("active");
$(selector).addClass("active");

$(this).index() is 0-index according the the place in its parent‘s childNode-tree.

If we say we have the number 3 element in the dom: ( 0-index = 2 )

Math.floor(2/3) +1 =
Math.floor(0,67) + 1 =
0 + 1 = 1

The selector is then:

#tab1

and again if we take the 7th element in the dom: 0-index = 6;

Math.floor(6/3) + 1 = 
2 + 1 = 3

this would give us

var selector = "#tab3";

Or we could just just Math.ceil instead of Math.floor + 1 🙂

var selector = "#tab" + Math.ceil($(this).index()/3);
$("#tab1, #tab2, #tab3").removeClass("active");
$(selector).addClass("active");

Math.floor rounds down, Math.ceil rounds up, and Math.round round to nearest:

Math.floor(2.1); // 2
Math.floor(2.9); // 2

Math.ceil(2.1); // 3
Math.ceil(2.9); // 3

Math.round(2.1); // 2
Math.round(2.9); // 3

note: using round with .5 round up.

Math.round(2.5) // 3