Question

So what I’m trying to do is break a form into different sections, and show/hide using jQuery.
I have something like this:

I can’t change this:

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

With jQuery I would like to select the first 4 divs and assign a class ‘sec_1’ to those divs and ‘sec_2’ to the last four.

I’ve tried doing something like this:

$('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");

But that didn’t work. Any ideas?

Thanks a lot!
A.

Answer 1

Your class selector is missing the leading .. Also, no need to split it up so much and grab individual elements.

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

or more concisely:

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

EDIT: After reading the note in the jquery docs, even better performance:

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

http://jsfiddle.net/bstQ5/