后网格布局上的随机不同颜色背景

Question

我想使用这个插件来显示博客文章，但不是将图像作为背景，客户想要不同颜色的图像。从这里的另一篇文章中，我已经找到了我认为可以执行此操作的代码，但我无法将它带到网站上！这是我编写的似乎在这里工作的代码。 Example where code is working.

这是目前有问题的网站。 The div site where it isn't working like it should...

你会看到所有的颜色都是一样的，而不是像他们应该的那样交替... 任何有用的建议将不胜感激为什么这不起作用。

这是上面 jsfiddle 中的 CSS 和 JS。

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

尝试从2n、`3n 等中删除n...

如果不起作用，请尝试将他们与他们的父母联系起来，例如：
#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 端代码执行相同的操作。