Как реализовать обновление nth-of-type и изменение таблицы с помощью js?

Question

[nepster-web]

Есть таблица к примеру из 10 колонок, содержимое не важно. Используется css псевдокласс nth-of-type для подсветки баграунда ячекк. Выходит так:

1 ячейка: красное 
2 ячейка: черное
3 ячейка: красное 
4 ячейка: черное
5 ячейка: красное 
6 ячейка: черное
...

Теперь мне нужно пошаманить и скажем удалить 2 ячейку. Тогда получится:

1 ячейка: красное 
3 ячейка: красное 
4 ячейка: черное
5 ячейка: красное 
6 ячейка: черное
...

Задача сделать так, что бы при удалении и добавлении колонок обновлялся nth-of-type

Тоесть:

1 ячейка: красное 
3 ячейка: черное
4 ячейка:  красное
5 ячейка:  черное
6 ячейка: красное
...

Я пробовал как то так, но не работает.

$('#gameRules').removeClass('table');
  $('#gameRules').addClass('table');

Answer 1

[akashtrih]

Напиши функцию на JS, которая после скрытия/показа ряда, будет пробегаться по всем рядам и проставлять классы только видимым элементам.

Comments

[nepster-web]

если нет других вариантов, то придется. Спасибо!

Answer 2

[Евгений Федоров]

пишите

$('ul li:nth-child(2)').remove();
resort();

function resort() {
    $('ul li:even').text('красное');
    $('ul li:odd').text('черное');
}

Answer 3

[akashtrih]

Попробуй этот пример: jsfiddle.net/shtrih/M5AUc. Тут проблема есть? У меня работает корректно. При удалении ряда, двух рядом стоящих рядов одного цвета не создаётся.

Comments

[nepster-web]

jsfiddle.net/M5AUc/3

у меня скорее вот такой случай. И если скрыть 2 ячейку будет черное черное

[Евгений Федоров]

Вы не убираете а прячите, вам нужно его remove, как я написал выше. А если добавить то использовать append.

[nepster-web]

там принцип показать/скрыть. Тоесть у меня есть таблица правил и исходя из значения одного правила нужно показывать или не показывать другие правила.

Answer 4

[Евгений Федоров]

Если чесно я сильно удивился когда увидел как не правлиьно работает nth-child
jsfiddle.net/mQr7K/1

Comments

[nepster-web]

Всмысле ?

[Евгений Федоров]

$('.visible:nth-of-type(2n+1)').addClass('black'); Не правильно отработал.

[akashtrih]

Ты заблуждаешься, он правильно отработал. Просто видимость элемента никак не учитывается :nth-of-type

[Евгений Федоров]

Это ты друг мой заблуждаешься =) Это не видимость а класс елемента.

[akashtrih]

:nth-of-type в jQuery работает так, будто не с отфильтрованной выборкой, а с реальным DOM, в итоге получается не тот эффект, который ты ожидал, а такой же, как был при использовании чистого CSS.
Например, то, что ты хотел реализовать с помощью классов может работать так (без :nth-of-type, но с :even): jsfiddle.net/shtrih/mQr7K/2

Answer 5

[Евгений Федоров]

В ообщем предлогаю юзать так тогда

var count = 0;
$('.select-all-these:not(.except-these)').each(function(){
    if ( count++ % 2 == 0 ) $(this).css('color','red')
})