Случайные разноцветные фоны на макете пост-сетки

Question

Я хочу использовать этот плагин для отображения сообщений в блоге, но вместо изображения в качестве фона клиенту нужны изображения разного цвета. Из другого поста здесь я разобрался с кодом, который я считаю, чтобы сделать это, НО я не могу заставить его взять на сайте!. Вот код, который я сделал, который, кажется, работает здесь. Пример, где работает код.

А вот и этот сайт на данный момент. Div сайт, где он не работает, как должно...

Вы увидите, что все цвета одинаковы и не чередуются так, как они должны быть... Любые полезные советы будут с благодарностью приняты по поводу того, почему это не работает.

Вот CSS и JS, которые находятся в jsfiddle выше.

CSS:

.custom_tdgclients_grid{width:20%;height:90px;display:inline-block}
.custom_tdgclients_grid{background:#a7948b}
.custom_tdgclients_grid:nth-child(2n){background-color:rgb(232, 73, 73)!important;}
.custom_tdgclients_grid:nth-child(3n){background-color:rgb(83, 71, 65)!important;}
.custom_tdgclients_grid:nth-child(4n){background-color:#e8d2af!important;}
.custom_tdgclients_grid:nth-child(5n){background-color:rgb(131, 119, 113)!important;}
.custom_tdgclients_grid:nth-child(6n){background-color:rgb(216, 184, 133)!important;}
.custom_tdgclients_grid:nth-child(7n){background-color:rgb(201, 93, 93)!important;}
.custom_tdgclients_grid:nth-child(8n){background-color:#e8d2af!important;}

И Javascript:

$('.custom_tdgclients_grid:nth-child(2n)').css({'background-color':'rgb(232, 73, 73)'});
$('.custom_tdgclients_grid:nth-child(3n)').css({'background-color':'rgb(83, 71, 65)'});
$('.custom_tdgclients_grid:nth-child(4n)').css({'background-color':'#e8d2af'});
$('.custom_tdgclients_grid:nth-child(5n)').css({'background-color':'rgb(131, 119, 113)'});
$('.custom_tdgclients_grid:nth-child(6n)').css({'background-color':'rgb(216, 184, 133)'});
$('.custom_tdgclients_grid:nth-child(7n)').css({'background-color':'rgb(201, 93, 93)'});
$('.custom_tdgclients_grid:nth-child(8n)').css({'background-color':'rgb(181, 128, 101)'}); 

Answer 1

Попробуйте удалить n от 2n, 3n и т. Д.

Если это не работает, попробуйте отождествить их с родителями, например:
#parent .custom_tdgclients_grid:nth-child(2)

Надеюсь, это сработает:)

Answer 2

Я понял код для исправления этого. Я собираюсь опубликовать это здесь для всех, кому это может понадобиться. Идентификация их с их родителями, я думаю, была ключевой!!

#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid {background-color: #a7948b;}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid { background-color: rgb(232, 73, 73);}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid { background-color: rgb(83, 71, 65);}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid {  background-color: #e8d2af;}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid { background-color: rgb(131, 119, 113);}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid {  background-color: rgb(216, 184, 133);}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid { background-color: rgb(201, 93, 93);}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid { background-color: #e8d2af;}

Затем просто сделайте то же самое для кода стороны JS.