Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
An introduction to DOM traversal with jQuery.
You can fork this workspace to follow along with the first half of the video.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
DOM traversal, sounds serious, doesn't it?
0:00
Not really, traversal just means
to travel across or through.
0:03
Traversal, in the case of jQuery,
means to traverse the DOM, or
0:08
to move from one element
on our webpage to the next.
0:12
If you've done DOM scripting before,
0:16
you're probably aware of some of
the terms associated with traversal.
0:17
We've used similar terms in this course
when talking about using the CSS
0:21
selectors.
0:25
But here's a refresher.
0:26
If I selected this unordered
list through jQuery,
0:28
the list items would be
described as the ul's children.
0:31
If I selected an item in the list,
the second item for
0:36
example, the ul would be the parent
of the selected list item.
0:39
While the first, third and
0:44
fourth list items would be known as
siblings to the selected list item.
0:45
The EQ, or
0:50
equals method in jQuery allows you to find
an element in a set of elements by index.
0:52
So in our example,
0:57
you could use the equals method to find
one of these list items by its index.
0:58
This is because each
list item is represented
1:04
as an array of children to the ul.
1:07
For example, going over to our Console,
to Select the second list item,
1:09
you would first select the list
items on the page using jQuery.
1:14
Then call the equal method on it, and
pass it an index of 1, like this.
1:19
We would pass an index of 1
to get the second object,
1:26
because the elements are zero index,
just like a normal array.
1:29
To demonstrate that we're selecting it,
let's use another jQuery method, CSS,
1:33
to change the element's color.
1:38
The CSS method takes an object
with the style property name,
1:42
along with the value you wanna set it to.
1:46
Don't worry too much about
the CSS method for now.
1:49
We'll revisited in an upcoming lesson.
1:52
For now,
1:54
I'm going to give it an object that will
change the color of the text to green.
1:55
And you can see that the second
item in the list turns green.
2:04
You can read this jQuery
statement as select the list
2:08
element with an index equal to 1,
and change its color to green.
2:12
Keep in mind, however,
2:17
that this jQuery collection doesn't
behave quite like a normal array.
2:18
For example, you can use the equal
method to access the array backwards,
2:23
by passing it a negative number.
2:27
If I were to put a -2 here, the equals
method starts at the end of the array and
2:33
counts backwards, to select the second
to last element in the list.
2:40
Lets refresh and
go back to selecting the second list item.
2:45
To traverse or move from the second
element in the list to the first element
2:56
in the list,
you could use the previous method.
3:00
I'll then use the CSS method to
turn that item green and hit Enter.
3:04
When I hit Enter, you'll see that
the first item in the list is selected.
3:11
The previous method returns
the sibling element immediately before
3:16
the selected element.
3:19
What we're saying here is, get the list
item with an index equal to 1.
3:21
That's Item Two.
3:25
Now go to the previous sibling element.
3:28
That's Item One.
3:30
jQuery then returns us that element,
3:32
with all the handy dandy
jQuery methods attached.
3:34
So we can change the style,
hide or show it, or
3:38
virtually anything else
we've learned about so far.
3:40
So in this case, we're saying,
take that element and turn it green.
3:43
To traverse from the second list
item to the third list item,
3:47
you can use the next method.
3:51
Refresh the page to clear
the current selection.
3:54
Use the up arrow to get the last line
of code and change previous to next.
3:57
Hit Enter, and in this example the next
method will return the third list item.
4:03
So we're saying here,
get the element with an index equal to 1.
4:09
Now get the next element,
and now turn it green.
4:13
You can also chain multiple
traversal methods together.
4:18
Refresh the page to clear the selection,
4:21
hit up to get the last line of code, and
add another next method to the chain.
4:24
Chaining two next methods here,
4:31
will traverse down the list to
get to the fourth list item.
4:33
Something to keep in mind,
if we were to add another next onto here.
4:37
We'll be returned an empty jQuery object,
because another sibling doesn't exist.
4:45
There's no fifth list item.
4:51
So nothing turns green, but we also don't
get an error in the console or anything.
4:53
Open up the workspace with this videos,
and
4:57
we'll use traversal to fix our
spoiler revealer from earlier.
4:59
Let's recap the problem.
5:03
First, make sure the spoiler
span .show is uncommented,
5:05
if you still had it commented
out from the previous video.
5:09
Then we'll wanna save and preview.
5:12
Our problem is that when
we click either button,
5:17
all the spoilers are revealed,
not just the spoiler that was clicked.
5:21
As a first step to solving this problem,
let's refresh the page and
5:26
open DevTools to look at the HTML we're
generating So when the button is clicked,
5:29
we wanna traverse to the previous element,
the sibling element to
5:37
this specific button that was clicked,
and show that span only.
5:42
Let's go to our code and delete the line
that selects and shows the spoiler span.
5:48
Instead, we'll select the button again,
using event.target.
5:55
Then, because we're going back
to the span before the button,
6:01
we can use the previous method.
6:05
We're using event.target to
determine which button is clicked.
6:07
And we're passing that information to
jQuery to select the correct element.
6:13
Then we're saying, whichever button was
clicked, go to the previous element.
6:18
That's the span element
containing the spoiler text.
6:24
And finally, show that element.
6:28
So let's save and refresh the preview.
6:31
Now when we click on the first button,
only the first spoiler is revealed.
6:39
And when we click on the second button,
only the second spoiler is revealed.
6:43
Now, note for
the purposes of our small project here,
6:48
this is a perfectly fine way to do it.
6:51
But it could potentially create a problem,
6:54
because it assumes our HTML
markup is never going to change.
6:56
For example, if we were to add another
sibling element between the spoiler
7:00
text and the spoiler button,
we'd end up breaking our code here.
7:04
So this is always something to consider
when you're traversing the DOM.
7:08
One final thing, when selecting the target
of an element, as we're doing here and
7:12
here, there's a simplified
syntax that people use.
7:16
And that's using the this keyword.
7:20
So instead of writing event.target,
we can use the keyword this.
7:23
The this keyword in JavaScript
is quite a complex subject.
7:33
But for
the purposes of the scope of this course,
7:37
here's what you need to
understand about it.
7:39
It's another way of
selecting event.target.
7:42
What we're saying here in plain English
is, this button, this particular
7:45
element that was clicked, traverse to the
element before it, and show that element.
7:51
Also, hide this particular
element that was clicked.
7:58
So let's save and refresh the preview, and
make sure it still works as we expect.
8:02
And it does, great.
8:08
Our spoiler revealer is complete.
8:11
Without adding any extra JavaScript,
8:13
we can now add as many spoilers
to the page as we want.
8:15
All of our buttons work, and
the correct spoilers will be revealed,
8:19
depending on which ones are clicked.
8:22
Additionally, our JavaScript code
is unobtrusive, fantastic work!
8:24
In the next and
8:29
final part of this course, we'll delve
deeper into more complicated selectors and
8:30
traversal methods, and learn how to
loop through collections of elements.
8:34
When we're finished, you'll be ready
to take on the world with jQuery.
8:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up