1
00:00:00,470 --> 00:00:03,720
DOM traversal, sounds serious, doesn't it?

2
00:00:03,720 --> 00:00:08,380
Not really, traversal just means
to travel across or through.

3
00:00:08,380 --> 00:00:12,560
Traversal, in the case of jQuery,
means to traverse the DOM, or

4
00:00:12,560 --> 00:00:16,210
to move from one element
on our webpage to the next.

5
00:00:16,210 --> 00:00:17,990
If you've done DOM scripting before,

6
00:00:17,990 --> 00:00:21,950
you're probably aware of some of
the terms associated with traversal.

7
00:00:21,950 --> 00:00:25,280
We've used similar terms in this course
when talking about using the CSS

8
00:00:25,280 --> 00:00:26,560
selectors.

9
00:00:26,560 --> 00:00:28,010
But here's a refresher.

10
00:00:28,010 --> 00:00:31,390
If I selected this unordered
list through jQuery,

11
00:00:31,390 --> 00:00:35,040
the list items would be
described as the ul's children.

12
00:00:36,290 --> 00:00:39,570
If I selected an item in the list,
the second item for

13
00:00:39,570 --> 00:00:44,220
example, the ul would be the parent
of the selected list item.

14
00:00:44,220 --> 00:00:45,870
While the first, third and

15
00:00:45,870 --> 00:00:50,910
fourth list items would be known as
siblings to the selected list item.

16
00:00:50,910 --> 00:00:52,030
The EQ, or

17
00:00:52,030 --> 00:00:57,540
equals method in jQuery allows you to find
an element in a set of elements by index.

18
00:00:57,540 --> 00:00:58,580
So in our example,

19
00:00:58,580 --> 00:01:04,620
you could use the equals method to find
one of these list items by its index.

20
00:01:04,620 --> 00:01:07,420
This is because each
list item is represented

21
00:01:07,420 --> 00:01:09,780
as an array of children to the ul.

22
00:01:09,780 --> 00:01:14,920
For example, going over to our Console,
to Select the second list item,

23
00:01:14,920 --> 00:01:18,320
you would first select the list
items on the page using jQuery.

24
00:01:19,880 --> 00:01:26,210
Then call the equal method on it, and
pass it an index of 1, like this.

25
00:01:26,210 --> 00:01:29,540
We would pass an index of 1
to get the second object,

26
00:01:29,540 --> 00:01:33,260
because the elements are zero index,
just like a normal array.

27
00:01:33,260 --> 00:01:38,050
To demonstrate that we're selecting it,
let's use another jQuery method, CSS,

28
00:01:38,050 --> 00:01:39,450
to change the element's color.

29
00:01:42,600 --> 00:01:46,510
The CSS method takes an object
with the style property name,

30
00:01:46,510 --> 00:01:49,080
along with the value you wanna set it to.

31
00:01:49,080 --> 00:01:52,120
Don't worry too much about
the CSS method for now.

32
00:01:52,120 --> 00:01:54,180
We'll revisited in an upcoming lesson.

33
00:01:54,180 --> 00:01:55,380
For now,

34
00:01:55,380 --> 00:02:01,060
I'm going to give it an object that will
change the color of the text to green.

35
00:02:04,110 --> 00:02:07,050
And you can see that the second
item in the list turns green.

36
00:02:08,270 --> 00:02:12,550
You can read this jQuery
statement as select the list

37
00:02:12,550 --> 00:02:17,830
element with an index equal to 1,
and change its color to green.

38
00:02:17,830 --> 00:02:18,860
Keep in mind, however,

39
00:02:18,860 --> 00:02:23,180
that this jQuery collection doesn't
behave quite like a normal array.

40
00:02:23,180 --> 00:02:27,310
For example, you can use the equal
method to access the array backwards,

41
00:02:27,310 --> 00:02:29,190
by passing it a negative number.

42
00:02:33,600 --> 00:02:40,550
If I were to put a -2 here, the equals
method starts at the end of the array and

43
00:02:40,550 --> 00:02:45,220
counts backwards, to select the second
to last element in the list.

44
00:02:45,220 --> 00:02:48,540
Lets refresh and
go back to selecting the second list item.

45
00:02:56,390 --> 00:03:00,400
To traverse or move from the second
element in the list to the first element

46
00:03:00,400 --> 00:03:04,330
in the list,
you could use the previous method.

47
00:03:04,330 --> 00:03:08,540
I'll then use the CSS method to
turn that item green and hit Enter.

48
00:03:11,200 --> 00:03:15,100
When I hit Enter, you'll see that
the first item in the list is selected.

49
00:03:16,130 --> 00:03:19,940
The previous method returns
the sibling element immediately before

50
00:03:19,940 --> 00:03:21,360
the selected element.

51
00:03:21,360 --> 00:03:25,860
What we're saying here is, get the list
item with an index equal to 1.

52
00:03:25,860 --> 00:03:26,990
That's Item Two.

53
00:03:28,170 --> 00:03:30,910
Now go to the previous sibling element.

54
00:03:30,910 --> 00:03:32,750
That's Item One.

55
00:03:32,750 --> 00:03:34,890
jQuery then returns us that element,

56
00:03:34,890 --> 00:03:38,000
with all the handy dandy
jQuery methods attached.

57
00:03:38,000 --> 00:03:40,590
So we can change the style,
hide or show it, or

58
00:03:40,590 --> 00:03:43,390
virtually anything else
we've learned about so far.

59
00:03:43,390 --> 00:03:47,680
So in this case, we're saying,
take that element and turn it green.

60
00:03:47,680 --> 00:03:51,900
To traverse from the second list
item to the third list item,

61
00:03:51,900 --> 00:03:53,410
you can use the next method.

62
00:03:54,730 --> 00:03:57,630
Refresh the page to clear
the current selection.

63
00:03:57,630 --> 00:04:02,310
Use the up arrow to get the last line
of code and change previous to next.

64
00:04:03,530 --> 00:04:08,000
Hit Enter, and in this example the next
method will return the third list item.

65
00:04:09,020 --> 00:04:13,760
So we're saying here,
get the element with an index equal to 1.

66
00:04:13,760 --> 00:04:17,040
Now get the next element,
and now turn it green.

67
00:04:18,410 --> 00:04:21,530
You can also chain multiple
traversal methods together.

68
00:04:21,530 --> 00:04:24,040
Refresh the page to clear the selection,

69
00:04:24,040 --> 00:04:28,960
hit up to get the last line of code, and
add another next method to the chain.

70
00:04:31,800 --> 00:04:33,450
Chaining two next methods here,

71
00:04:33,450 --> 00:04:37,180
will traverse down the list to
get to the fourth list item.

72
00:04:37,180 --> 00:04:40,500
Something to keep in mind,
if we were to add another next onto here.

73
00:04:45,480 --> 00:04:51,030
We'll be returned an empty jQuery object,
because another sibling doesn't exist.

74
00:04:51,030 --> 00:04:53,380
There's no fifth list item.

75
00:04:53,380 --> 00:04:57,960
So nothing turns green, but we also don't
get an error in the console or anything.

76
00:04:57,960 --> 00:04:59,800
Open up the workspace with this videos,
and

77
00:04:59,800 --> 00:05:03,760
we'll use traversal to fix our
spoiler revealer from earlier.

78
00:05:03,760 --> 00:05:05,490
Let's recap the problem.

79
00:05:05,490 --> 00:05:09,690
First, make sure the spoiler
span .show is uncommented,

80
00:05:09,690 --> 00:05:12,830
if you still had it commented
out from the previous video.

81
00:05:12,830 --> 00:05:14,570
Then we'll wanna save and preview.

82
00:05:17,230 --> 00:05:21,300
Our problem is that when
we click either button,

83
00:05:21,300 --> 00:05:24,780
all the spoilers are revealed,
not just the spoiler that was clicked.

84
00:05:26,150 --> 00:05:29,570
As a first step to solving this problem,
let's refresh the page and

85
00:05:29,570 --> 00:05:37,600
open DevTools to look at the HTML we're
generating So when the button is clicked,

86
00:05:37,600 --> 00:05:42,170
we wanna traverse to the previous element,
the sibling element to

87
00:05:42,170 --> 00:05:45,910
this specific button that was clicked,
and show that span only.

88
00:05:48,990 --> 00:05:55,240
Let's go to our code and delete the line
that selects and shows the spoiler span.

89
00:05:55,240 --> 00:05:59,379
Instead, we'll select the button again,
using event.target.

90
00:06:01,800 --> 00:06:05,420
Then, because we're going back
to the span before the button,

91
00:06:05,420 --> 00:06:07,078
we can use the previous method.

92
00:06:07,078 --> 00:06:12,050
We're using event.target to
determine which button is clicked.

93
00:06:13,130 --> 00:06:17,360
And we're passing that information to
jQuery to select the correct element.

94
00:06:18,470 --> 00:06:24,390
Then we're saying, whichever button was
clicked, go to the previous element.

95
00:06:24,390 --> 00:06:27,200
That's the span element
containing the spoiler text.

96
00:06:28,250 --> 00:06:31,490
And finally, show that element.

97
00:06:31,490 --> 00:06:33,960
So let's save and refresh the preview.

98
00:06:39,250 --> 00:06:43,540
Now when we click on the first button,
only the first spoiler is revealed.

99
00:06:43,540 --> 00:06:47,160
And when we click on the second button,
only the second spoiler is revealed.

100
00:06:48,390 --> 00:06:51,710
Now, note for
the purposes of our small project here,

101
00:06:51,710 --> 00:06:54,230
this is a perfectly fine way to do it.

102
00:06:54,230 --> 00:06:56,650
But it could potentially create a problem,

103
00:06:56,650 --> 00:07:00,690
because it assumes our HTML
markup is never going to change.

104
00:07:00,690 --> 00:07:04,750
For example, if we were to add another
sibling element between the spoiler

105
00:07:04,750 --> 00:07:08,500
text and the spoiler button,
we'd end up breaking our code here.

106
00:07:08,500 --> 00:07:12,370
So this is always something to consider
when you're traversing the DOM.

107
00:07:12,370 --> 00:07:16,720
One final thing, when selecting the target
of an element, as we're doing here and

108
00:07:16,720 --> 00:07:20,660
here, there's a simplified
syntax that people use.

109
00:07:20,660 --> 00:07:23,140
And that's using the this keyword.

110
00:07:23,140 --> 00:07:27,090
So instead of writing event.target,
we can use the keyword this.

111
00:07:33,850 --> 00:07:37,490
The this keyword in JavaScript
is quite a complex subject.

112
00:07:37,490 --> 00:07:39,930
But for
the purposes of the scope of this course,

113
00:07:39,930 --> 00:07:42,510
here's what you need to
understand about it.

114
00:07:42,510 --> 00:07:45,960
It's another way of
selecting event.target.

115
00:07:45,960 --> 00:07:51,380
What we're saying here in plain English
is, this button, this particular

116
00:07:51,380 --> 00:07:58,150
element that was clicked, traverse to the
element before it, and show that element.

117
00:07:58,150 --> 00:08:01,560
Also, hide this particular
element that was clicked.

118
00:08:02,900 --> 00:08:07,050
So let's save and refresh the preview, and
make sure it still works as we expect.

119
00:08:08,740 --> 00:08:10,000
And it does, great.

120
00:08:11,170 --> 00:08:13,600
Our spoiler revealer is complete.

121
00:08:13,600 --> 00:08:15,840
Without adding any extra JavaScript,

122
00:08:15,840 --> 00:08:19,320
we can now add as many spoilers
to the page as we want.

123
00:08:19,320 --> 00:08:22,760
All of our buttons work, and
the correct spoilers will be revealed,

124
00:08:22,760 --> 00:08:24,880
depending on which ones are clicked.

125
00:08:24,880 --> 00:08:29,990
Additionally, our JavaScript code
is unobtrusive, fantastic work!

126
00:08:29,990 --> 00:08:30,600
In the next and

127
00:08:30,600 --> 00:08:34,670
final part of this course, we'll delve
deeper into more complicated selectors and

128
00:08:34,670 --> 00:08:38,970
traversal methods, and learn how to
loop through collections of elements.

129
00:08:38,970 --> 00:08:42,430
When we're finished, you'll be ready
to take on the world with jQuery.