Select Elements with jQuery

Different Select methods in jQuery


The easiest way to target a specific element or a set of elements within a document is by using a CSS selector within the jQuery wrapper function, like so:
jQuery('#content p a');
// Select all anchor elements within all paragraph elements within #content

Now that we’ve selected the elements we’re after, we can run any of jQuery’s methods on that collection. For example, adding a class of selected to all links is as simple as:


jQuery('#content p a').addClass('selected');

jQuery offers many DOM traversal methods to aid in the element selection process, such as next(), prev(), and parent(). These and other methods accept a selector expression as their only parameter, which filters the returned results accordingly. So, you can use CSS selectors in a number of places, not just within jQuery(...).When constructing selectors, there’s one general rule for optimization: be only as specific
as you need to be. It’s important to remember that the more complicated a selector is, the more time it will take jQuery to process the string. jQuery uses native DOM methods to retrieve the elements you’re after.


Here is an example of an unnecessarily complicated selector:

jQuery('body div#wrapper div#content');

A higher degree of specificity does not necessarily mean it’s faster.

The previous selector can be rewritten to this:
jQuery('#content');

Select Child elements 


Use the direct descendant combinator (>). This combinator expects two selector expressions,one on either side. For example, if you want to select all anchor elements that reside directly beneath list items, you could use this selector: li > a. This would select all anchors that are children of a list item; in other words, all anchors that exist directly beneath list items.

Here’s an example:

<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>
 to select only the anchors within each list item, you would call jQuery like so:

jQuery('#nav li > a');

// This selects two elements, as expected

The third anchor within the #nav list is not selected because it’s not a child of a list item;
it’s a child of a <span> element.

Selecting Specific Siblings


Consider the following  example HTML markup:

<div id="content">
<h1>Main title</h1>
<h2>Section title</h2>
<p>Some content...</p>
<h2>Section title</h2>
<p>More content...</p>
</div>

If you want to select only <h2> elements that immediately follow <h1> elements,
you can use the following selector:

jQuery('h1 + h2');
// Selects ALL H2 elements that are adjacent siblings of H1 elements

Selecting Elements by Index Order


Assuming the following HTML markup:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
the first item in the list could be selected in a number of different ways:

jQuery('ol li:first');
jQuery('ol li:eq(0)');
jQuery('ol li:lt(1)');

Notice that both the eq() and lt() filters accept a number; since it’s zero-indexed, the
first item is 0, the second is 1, etc.
A common requirement is to have alternating styles on table rows; this can be achieved
with the :even and :odd filters:

Example

<table>
<tr><td>0</td><td>even</td></tr>
<tr><td>1</td><td>odd</td></tr>
<tr><td>2</td><td>even</td></tr>
<tr><td>3</td><td>odd</td></tr>
<tr><td>4</td><td>even</td></tr>
</table>

You can apply a different class dependent on the index of each table row:

jQuery('tr:even').addClass('even');

You’d have to specify the corresponding class (even) in your CSS style sheet:

table tr.even {
background: #CCC;
}

Posted in: jQuery select statement,Select Elements with jQuery