요소 그룹을 선택하고 jQuery 클래스를 할당하십시오.

Question

그래서 저는 폼을 다른 섹션으로 나누고 jQuery를 사용하여 표시/숨기기를 시도하고 있습니다. 내가 처음 4 개 된 div를 선택하고 클래스 그 div의에 'SEC_1'과 'sec_2'을 지정하려는

<div class="form_row"></div> 
<div class="form_row"></div> 
<div class="form_row"></div> 
<div class="form_row"></div> 
<div class="form_row"></div> 
<div class="form_row"></div> 
<div class="form_row"></div> 
<div class="form_row"></div> 

을 jQuery를 함께 :

나는 이것을 변경할 수 없습니다 : 이 같은 뭔가를 마지막 4 개.

나는이 같은 일을 시도했다 :

$('form_row').get(0).addClass("sec_1"); 
$('form_row').get(1).addClass("sec_1"); 
$('form_row').get(2).addClass("sec_1"); 
$('form_row').get(3).addClass("sec_1"); 
$('form_row').get(4).addClass("sec_2"); 
$('form_row').get(5).addClass("sec_2"); 
$('form_row').get(6).addClass("sec_2"); 
$('form_row').get(7).addClass("sec_2"); 

을하지만 그것은 작동하지 않았다. 어떤 아이디어?

고맙습니다. A.

Answer 1

귀하의 class 선택이 최고의 .이 없습니다. 또한 개별 요소를 너무 많이 나눠서 분할 할 필요가 없습니다.

var $rows = $('.form_row'); 
$rows.filter(":lt(4)").addClass("sec_1"); 
$rows.filter(":gt(3)").addClass("sec_2"); 

이상의 간결 :

$('.form_row').filter(":lt(4)").addClass("sec_1") 
    .end().filter(":gt(3)").addClass("sec_2"); 

편집 :

$('.form_row').slice(0,4).addClass("sec_1") 
    .end().slice(4).addClass("sec_2"); 

http://jsfiddle.net/bstQ5/

Answer 2

이 시도 :

$('.form_row:nth-child(1),.form_row:nth-child(2),.form_row:nth-child(3),.form_row:nth-child(4)').addClass('sec_1'); 
$('.form_row:nth-child(5),.form_row:nth-child(6),.form_row:nth-child(7),.form_row:nth-child(8)').addClass('sec_2'); 

Answer 3

먼저,이 class selector해야 : JQuery와 문서에서 더 나은 성능을 메모를 읽은 후 .form_row이 아니라 form_row, 이는 모두 <form_row> 요소와 일치합니다. 인덱스가 같거나 3 다음 작은 경우 클래스 SEC_1을 추가, 선택한 각 요소를 통해

$(".form_row").each(function(index) { 
    $(this).addClass("sec_" + Math.floor(index/4 + 1)); 
}); 

Answer 4

루프 :

이제

대신 get()를 여러 번 호출, 당신은 each()에서 제공하는 index 인수를 사용할 수 있습니다 클래스 sec_2를 추가하십시오.

Working JSFiddle
http://jsfiddle.net/CvTb6/

HTML :

<div class="form_row">1</div> 
<div class="form_row">2</div> 
<div class="form_row">3</div> 
<div class="form_row">4</div> 
<div class="form_row">5</div> 
<div class="form_row">6</div> 
<div class="form_row">7</div> 
<div class="form_row">8</div> 

jQuery를 :

// Notice the '.' in front of the 'form_row', this indicates we are looking for a Class. 
$('.form_row').each(function(index, value){ // For each .form_row selected 
    if(index <= 3) // If index is equal to or less then 3 
    { 
     $(this).addClass("sec_1"); // Add this class 
    } 
    else 
    { 
     $(this).addClass("sec_2"); // Else add this class 
    } 
});