Web Development with jQuery®

Filtering a Selection (^) ❘ 43
Iterating a Selection with each() and Testing for a Condition with is()
Now that you have selected the various input fi elds in the context of the

element, you use the
each() method to iterate over all the elements matching the selection that you made with find().
each() is similar to writing a for loop, or a while loop; it’s used to iterate over an array or object. In
the context of this example, each() is used to iterate over a selection. In this example, you fi rst select
a element, and then you select four elements using the find() method. Now you need
to examine each element individually and see whether the user provided data to the input
elements that you have designated as required elements. each() is what you use to examine each
element, individually. It executes a callback function for each element in the selection. In the context
of this example, that means that the function provided to each() is executed four times, one for each
of the four elements matched in the call to find().
$('form#contactNewsletterForm').find('input, select, textarea').each(
Like events, elements are passed to each() in the form of the JavaScript keyword: this. In addition
to the keyword this, there is also an alternative way that you can access an element within the func-
tion that you provide to each(), and that is by specifying two arguments for the function. The fi rst
argument tells you where you are in the collection; it’s a counter offset from zero. The second argu-
ment is the value or object that you’re working with, and it provides the same data that is provided
in this. The following code snippet modifi es Example 2-2 so that it specifi es these two optional
arguments:
$('form#contactNewsletterForm').find('input, select, textarea').each(
function(counter, element)
{
Also like events, the elements passed to each() in the form of this are not jQuery-enabled by
default. So, the fi rst thing you do inside the anonymous function that is executed for each element
matched via the each() method is to create a variable with a reference to the element that is jQuery-
enabled. In this case you create a variable called node, which is an easy generic name to use. You
could have just as easily called the variable input, or something else more specifi c.
var node = $(this);
Now that you have a jQuery-enabled reference to the element, you look for the presence of the
HTML5 required attribute to see if the fi eld is required, and you do that with a call to the jQuery
method is(). In the context of any jQuery selection, is() tells you whether any of the elements in
the selection match a selector that you provide to is(). In the context of this selection, you have a
single element in that selection, thanks to each(), and that selection is assigned to the variable node.
The selection will be one of the four matched elements, going from top to bottom. So the
fi rst element each() that comes across is the with the id name contactFirstName, the second
element will be the with the id name contactLastName, the third will be the check box, and
the last element that each() will operate on is the submit button. The call to is() contains an attri-
bute selector: [required]. Using is(), you are asking, does the element match this selector? Another
way of asking this question is does the element match the selector: input[required="required"]
(if the element is an element, of course). And is() will return a boolean value telling you
whether the element matches the selector you’ve provided.
http://www.it-ebooks.info

Web Development with jQuery®

Get our desktop app

Company

Features

Documentation

Resources