選擇一組元素並用jQuery分配一個類

Question

所以我想要做的是將表單分成不同的部分，並使用jQuery顯示/隱藏。 我有這樣的事情：

我不能改變這一點：

<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個格，並指定一個類的SEC_1'到這些div和「sec_2」到最後四個。

我試着做這樣的事情：

$('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>元素。

現在，而不是多次調用get()，可以使用由each()提供的index論點：

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

Answer 4

遍歷每個所選擇的元素，如果索引是等於或小於3，添加類SEC_1 ，否則添加class 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 
    } 
});