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

Question

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

И вот сайт, о котором идет речь на данный момент. The div site where it isn't working like it should...

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

Вот 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.