использование диапазона для n-го дочернего селектора - очистка некоторого кода

Question

Мне удалось смоделировать слайд-шоу, вложенное во вкладки - где следующая кнопка на последнем слайде на вкладке может перейти на следующую вкладку.

Я сделал это с помощью селекторов nth child - однако ive пришлось буквально вводить функцию для каждого nth child - например:

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

и т. Д.

есть ли способ использовать диапазон значений для селектора nth-child - что-то вроде:

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

или

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

что-то в этом роде.

полный код здесь http: здесь

спасибо!

Answer 1

Существует также способ выбрать все элементы, начиная с индекса со следующим селектором:

$(':nth-child(n3)').addClass('test');

В этом примере все элементы после второй будут затронуты.

Answer 2

Хорошо!

Используйте метод index(): http://jsfiddle.net/fPvJK/8/

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

$(this).index() равно 0-index в соответствии с местом в его parent 'childNode -дереве.

Если мы скажем, что у нас есть элемент номер 3 в домене: (0-index = 2)

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

Селектор тогда:

#tab1

и снова, если мы возьмем 7-й элемент в дом: 0-index = 6;

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

это даст нам

var selector = "#tab3";

Или мы могли бы просто Math.ceil вместо Math.floor + 1:)

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

Math.floor округляется вниз, Math.ceil округляется вверх, а Math.round округляется до ближайшего:

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

примечание: использование round с .5 округлением вверх.

Math.round(2.5) // 3

Answer 3

может использовать index function -

Демо

Пример-

var index = $(this).index('#slideshow li');
if(index < 3) {
     $('#tab1').addClass('active');
     $('#tab2').removeClass('active');
     $('#tab3').removeClass('active');
}
else if(2 < index && index < 6) {
     $('#tab1').removeClass('active');
     $('#tab2').addClass('active');
     $('#tab3').removeClass('active');
}
else if(index > 5) {
     $('#tab1').removeClass('active');
     $('#tab2').removeClass('active');
     $('#tab3').addClass('active');
}