This is the fourth lesson on our jQuery series. Please refer to previous tutorials if you haven’t.
We will be taking a look at Filters and Traversing.
Filtering
As the name suggest this refers to narrowing down the search for elements. We will go over 6 of the most common types.
Let’s start with the what we may refer to as ‘index-related selectors’:
(:eq(), :lt(), :gt(), :even, :odd)
To use a filter, you add a colon followed by the filter’s name after the main selector.
e.g $('.main-class:even');
:eq()
Selects the element at index n within the matched set. It is used to select a single element that is returned from a collection or array of elements that match a specified selector .
For example if elements are first selected with a specific class and more than one elements are returned as in the case below:
var p = $('.demo');
How do we filter from the selection and get only the second paragraph?
Note that what is returned is an array and Javascript uses 0-based indexing, i.e the first element in an array is at index zero.
So clearly the second paragraph will be at index 1. To select it directly we simply do this:
$('.demo:eq(1)');
Similarly for the first: $('.demo:eq(0)');
For the third: $('.demo:eq(2)'); and so on
:gt()
Selects all elements at an index greater than n within the matched set.
It is important to take note of the difference between this and :eq() from the description. :eq() returns only a single selection whereas :gt() returns more than one. It returns all elements from a selection that is greater than an index you specify.
For example to select the last two paragraphs, we simply make use of the 0-based indexing we saw earlier.
We have 5 elements with the same class, that makes the last two paragraphs number 4 and 5. But because of Javascript indexing they will end up at index 3 and 4 respectively.
$(‘.myclass:gt(2)’); – this says select all elements with a class of ‘.myclass’ but return only those which index is greater than 2.
:lt()
Select all elements at an index less than n within the matched set.
This is similar to :gt() except in the opposite sense.
:even()
Selects even elements from a matched set.
Quite counter-intuitively, :even selects the first element, third element, and so on within the matched set as a result of zero based indexing.
So given an array like below:
0 1 2 3 4 – index positions
[‘p1‘, ‘p2‘, ‘p3‘, ‘p4‘, ‘p5‘]
$('.myclass:even'); – selects the second(index 1), third(index 3) and fifth paragraph(index 5).
The opposite is the case for :odd.
:first and :last
The :first pseudo-class is equivalent to :eq( 0 ). It could also be written as :lt( 1 ). This matches only a single element.
$('.myclass:first'); – will select only the first p tag in the HTML snippet above.
:last – Selects the last matched element. It also selects a single element by filtering the current jQuery collection and matching the last element within it.
$('.myclass:last'); – will select the last p tag.
For more details visit jQuery’s official documentation at http://api.jquery.com/category/selectors/basic-filter-selectors/, http://api.jquery.com/category/selectors/child-filter-selectors/, http://api.jquery.com/category/selectors/content-filter-selector/.
Traversing
prev() and next():
These are used to select elements that come directly after or before another element int the same level in the DOM tree, i.e elements which are siblings to one another.
<p>, <h2> and <ul> are siblings in the HTML snippet above. They are the direct children of the div tag.
If we select the <h2> tag, we can easily move a step upwards or a step downwards to get to its two siblings.
From h2, to move upwards to p we make use of .prev().
$('h2').prev(); – returns the p tag.
From h2, to move downwards to ul, we make use of .next().
$('h2').next(); – returns ul.
Its really that simple.
.parent()
Selects the immediate parent or ancestor of a selection. This method only traverse a single level up the DOM tree.
From our example, <li> has three parents: <ul> which is it’s direct parent and <div> which is it’s grandparent and <main> it’s great grandparent
So to get the immediate parent of <li>:
$('li').parent(); returns <ul>.
To get all it’s parents, both direct and grand and great grand etc we use:
$('li').parents(); returns <ul> and <div> and <main>. This method traverse all the way up to the first ancestor or parent.
To get some parents or ancestors but excluding some up the chain, we use: .parentsUntil(”).
This takes a selector from which to start exclusion.
So to select only the <div> and <ul> parents of the <li> element, we can do:
$('li').parentsUntil('main'); – selects all the parents but exits and skips <main>
.children()
Get the children of each element in the set of matched elements, filtered optionally by a selector. This method only traverse a single level down the DOM tree i.e it does not return grandchildren, great-grandchildren etc.
For example using this method to find the children of the div
$(‘div’).children(); – will return only <p>, <h2> and <ul> not including <li>
.find()
This method searches for descendant elements that match the specified selector. It traverses downwards along descendants or children of DOM elements, all the way down to the last descendant or child.
For example we can select the <h2> element by using find like so:
$(‘div’).find(‘h2’);
For more details visit jQuery’s official documentation at https://api.jquery.com/category/traversing/
