동일한 요소의 배열을 만들고 jquery에서 다른 스타일을 지정하는 방법

Question

반복 요소를 식별하고 각 요소에 다른 배경색을 지정하려면 .find()을 사용하고 있습니다. 내가 원하는 것은 :

1. 는
2. 은 "위젯 제목"클래스와 모든 H3 찾기 수동 색상의 배열 (색 배열) (#의 EF4128, #의 BA1028, # 2C4534 등)을 만들어에 넣어 배열 (요소 배열)
3. 각 항목에 두 배열을 일치시켜 다른 색을 지정하십시오.

여기서는 많은 일을해야합니다. 그러나 나는 루프와 사물에 익숙하지 않기 때문에 다음과 같이했다. 누구든지 이걸 짧고 달콤하게 만드는 방법을 말해 줄 수 있었습니까?

<script type="text/javascript"> 
jQuery(document).ready(function(){   
var item1 = jQuery('h3.widget-title')[0]; 
var item2 = jQuery('h3.widget-title')[1]; 
var item3 = jQuery('h3.widget-title')[2]; 
var item4 = jQuery('h3.widget-title')[3]; 
var item5 = jQuery('h3.widget-title')[4]; 
var item6 = jQuery('h3.widget-title')[5]; 
var item7 = jQuery('h3.widget-title')[6]; 

jQuery('aside').find(item1).css('background-color', '#5938A2'); 
jQuery('aside').find(item2).css('background-color', '#BE8A45'); 
jQuery('aside').find(item3).css('background-color', '#B6AE18'); 
jQuery('aside').find(item4).css('background-color', '#864D75'); 
jQuery('aside').find(item5).css('background-color', '#2C4534'); 
jQuery('aside').find(item6).css('background-color', '#BA1028'); 
jQuery('aside').find(item7).css('background-color', '#EF4128'); 
}); 
</script> 

Answer 1

그래서

$(function(){   
    var colours = ['#5938A2', '#BE8A45', '#B6AE18', '#864D75', '#2C4534', 
        '#BA1028', '#EF4128']; 

    $('aside h3.widget-title').each(function(i) { 
     $(this).css('background-color', colours[i] || "#000"); 
     /* if you have more elements than colours defined, use 
     * a default colour - e.g. #000 
     */ 
    }); 
}); 

현재 요소의 인덱스가 each() 방법 내부에 전달되고이 모든 경우 간단한 배열 조회

---

에 사용되는 같은 코드를 줄일 수 표제는 형제 자매이며, 더 많은 CSS와 현대적인 브라우저를 포함하는 다른 해결책은 다음과 같은 몇 가지 CSS 규칙을 정의하여 얻을 수 있습니다.

h3.widget-title.changecolour { background-color: #5938A2; } 
h3.widget-title.changecolour ~ h3.widget-title { background-color: #BE8A45; } 
... 
h3.widget-title.changecolour ~ ... ~ h3.widget-title { background-color: #EF4128; } 

다음에 첫 번째 h3.widget-title 요소에 changecolour 클래스를 추가하면됩니다. 이것은 다른 모든 형제 표제의 배경색을 자동으로 변경합니다.