Break up a form with jQuery? - javascript

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?

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

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.

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

Related

Why the first element of the return value of the jQuery empty() function is the element itself?

I saw a code as bellow in a javascript function:
A.empty()[0].options.add(new Option('', ''));
and A is a dom select element. It seems A.empty()[0] is refering to the same select element. This means that empty returns an array whose first element is the dom object itself (i.e, A here).
Can somebody explain this behavior or link me somewhere I can read about this behaviour? (Or I completely misunderstood this code!?)
update: looking at the API documentation here does say the return value is a jQuery. Is this the expected behavior of the jQuery functions that their return value's first element is always the element the function is called upon (given the return value is of type jQuery)?
The empty() method removes all child nodes and content from the selected elements.
and adding option to that select element with a blank ''.
empty() just removes any child nodes and returns the original element.
[0] just returns the first DOM element in the collection. jQuery objects contain an "array-like" collection of HTML elements.
Followup:
jQuery objects are always a collection of 0 or more HTML elements. This is one of the best features of jQuery and allows code to be written that does not fall over when there are no matching elements (although accessing [0] will fall over if you try to access a property when the jQuery object has 0 length, but [0] is a non-jQuery way of doing things).

jQuery: Chain selectors off of DOM element variables

I have this event handler from kendo's drag and drop UI and I've assigned it to a variable, lets say e.
I'm trying to select divs that have ID's containing a certain string. I know the syntax for that when continuing from classic jQuery selectors, i.e.
$('select div[id*="whatever"]')
But can I do this off of a variable that contains a DOM element? I know this is a rather simple question but google has thus far been unable to help me.
If you want to filter a preexisting jQuery result, you can go with this:
var $allDivs = $("div"),
$certainDivs = $allDivs.filter("[id*='whatever']");
I believe you might want .find
// returns all DOM elements that
// (1) are descendants of e
// (2) match the selector
e.find("selector");
If e isn't wrapped with jQuery, you might need to do $(e) instead.

JQuery splice DOM elements

I would like to perform a splice method much like the native Array.splice but I would like to splice a jQuery collection of DOM elements. How is this done cleanly?
Edit: why do I need example code? I am looking for the exact same functionality of the ECMAScript Array.splice function, except I want it to work on a jQuery array of DOM elements, and update the DOM when it's done.
If you are using a DOM collection after splice of your collection you need reload the DOM with that collection to made effect the changes .
So use append and remove keywords for live changes .. which are equals to splice on an collection.
Selecting elements with jQuery actually gives you an array of elements, which can be treated as a normal javascript array as well as a jQuery object. To ensure that an array is a jQuery object you can wrap it in a call to jQuery(). For example:
var x = jQuery('p'),
y = jQuery(x.splice(x.length / 2, x.length));
x.css('background-color', 'red');
y.css('background-color', 'blue');
x contains the first half of <p> tags, which all now have a red background, and y has the second half, with a blue background.
Here's some proof.
Also, there is no problem with mixing tags (e.g. <p> and <div> tags can be in the array and jQuery will work as expected). See here.

javascript memory question

Let's say before my webapp starts, I want to create all dom elements initially and store them in some preloaded array. Something like:
for (i = 1...100) { preLoader.push($('<div id="' + i + '" />')); }
and then later, depending on the action, I will take the correct element from the array and append it to the DOM.
Now my question is: if I were to later do:
$(div#i).remove()
will it also affect my preLoader array, or is it a different reference than the one in the DOM?
will it also affect my preLoader array
No, it will not. Object will be removed from memory, only and only if there are no ways to access it, that is no references to it. After $('div#'+i).remove(), you can't access it from the DOM, but you can still access it by preLoader[i-1].So you need to remove the object from preLoader array explicitly:
preLoader.splice(i-1,1);
The object in the DOM is the same. If you want to reuse the same tag again you should call
$(div#i).detach();
From jquery docs:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
If you use .remove() you will lose events and data associated with the element beeing removed. But even using remove() you can reuse the same element after by calling .appendTo() again.
Example on fiddler: http://jsfiddle.net/sKRCF/1
(sorry about the alerts, it's the easy way).

Is there an easy way to use prototype show hide functions on array of html elements

I noticed that you can't use the show function on an array of html elements like the list of elements returned when you apply a document.getELementsByClassName call. For which I have to make a little loop and apply the show/hide or any other extended dom function to the individual elements.
If there an easy way to do this in prototype without having to go through a loop? Just asking.
Try invoke
myArray.invoke('show');
Or you can use each

Categories