포스트 그리드 레이아웃에 랜덤하게 다른 색깔의 배경이 있습니다.

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

그리고 자바 스크립트 :

$('.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

제거보십시오 n2n에서`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 사이드 코드에 대해 동일한 작업을 수행하십시오.