Break up a form with jQuery?

Question

I have a form, which I want to iterate through. I want to show one fieldset at a time, and then show a "next" and "back" button to go to the next section.

I'm assuming that I start with $('fieldset'); but how do I access individual elements thereafter? $("fieldset")[i] does not seem to work.

How would I accomplish that with jQuery?

Answer 1

I don't necessarily recommend this, but:

$($('.fieldset')[i]).css(...)

Should work.

If you wrap each call to $('.fieldset')[i] in a new JQuery selector, you create a new JQuery object out of that single item. JQuery objects have the method css that you want. Regular dom objects do not. (That's what you get with $('.fieldset')[i])

Answer 2

$("fieldset").each(function() {
  // code, applied for each fieldset
})

Answer 3

From the jQuery documentation:

How do I pull a native DOM element from a jQuery object?

A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation:

$('#foo')[0]; // equivalent to document.getElementById('foo') The second method is to use the get function:

$('#foo').get(0); // identical to above, only slower You can also call get without any arguments to retrieve a true array of DOM elements.

To get a jQuery wrapper back around the DOM element you just extracted, rewrap it like so:

$( $('#foo')[0] ) //now it's ajQuery element again.