Arrière-plans de couleurs différentes aléatoires sur la disposition post-grille

Question

Je souhaite utiliser ce plugin pour afficher des billets de blog, mais au lieu d'avoir l'image comme arrière-plan, le client souhaite des images de couleurs différentes. D'un autre post sur ici j'ai compris le code que je crois faire ceci MAIS je ne peux pas l'obtenir pour prendre sur le site Web !. Voici le code que j'ai fait qui semble fonctionner ici. Example where code is working.

Et voici le site en question en ce moment. The div site where it isn't working like it should...

Vous verrez que toutes les couleurs sont les mêmes et non en alternance comme ils devraient être ... Des conseils utiles serait grandement apprécié pourquoi cela ne fonctionne pas.

Voici le CSS et JS qui est dans le jsfiddle ci-dessus.

Le 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;} 

Et le 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

Essayez de retirer le n de 2n, `3n, etc ...

Si cela ne fonctionne pas essayer d'identifier eux avec leurs parents comme:
#parent .custom_tdgclients_grid:nth-child(2)

Espérons que ça marchera :)

Answer 2

J'ai trouvé le code pour corriger cela. Je vais l'afficher ici pour tous ceux qui pourraient en avoir besoin. Les identifier avec leurs parents, je pense était la clé !!

#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;} 

Ensuite, faites la même chose pour le code latéral JS.