要素のグループを選択し、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"); 

はEDIT：jQueryのドキュメントでノートを読んだ後、さらに優れた性能：

$('.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べき.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 
    } 
});