1
00:00:00,270 --> 00:00:03,840
Fantastic work so far,
we've nearly made it to the end.

2
00:00:03,840 --> 00:00:07,290
And you're familiar enough with
jQuery to work with it in the wild or

3
00:00:07,290 --> 00:00:10,510
use it to make quick
work of smaller projects.

4
00:00:10,510 --> 00:00:14,380
Let's talk about how jQuery can help you
with another way to traverse through a set

5
00:00:14,380 --> 00:00:15,630
of elements.

6
00:00:15,630 --> 00:00:19,650
Not to mention one of the most common
task you'll perform as a developer,

7
00:00:19,650 --> 00:00:22,550
looping through a collection of items.

8
00:00:22,550 --> 00:00:25,980
If you're taking this course,
chances are you've written a for loop and

9
00:00:25,980 --> 00:00:29,710
are at least somewhat familiar
with this slightly tedious drill.

10
00:00:29,710 --> 00:00:35,570
For let i = 0, i is less than
collection.length and so on.

11
00:00:35,570 --> 00:00:40,522
Let's look at a simplified way to do
this in jQuery, the .each() method.

12
00:00:40,522 --> 00:00:45,430
With jQuery's .each() method, much of
the complexity of the for loop is removed.

13
00:00:45,430 --> 00:00:49,860
You don't need to keep track of an index
or have three statements on one line.

14
00:00:49,860 --> 00:00:53,650
Instead, the .each() method iterates
through all of the elements for you and

15
00:00:53,650 --> 00:00:57,450
you pass it to a function that will
act on each element in the collection.

16
00:00:57,450 --> 00:00:58,130
In other words,

17
00:00:58,130 --> 00:01:02,780
this function will be called as many times
as there are items in the collection.

18
00:01:02,780 --> 00:01:07,251
To see how this works, let's open
up the newsfeed example again and

19
00:01:07,251 --> 00:01:10,473
let's log out the href of
every link on the page.

20
00:01:13,375 --> 00:01:20,910
First, we select all the links,
Then we call the .each() method.

21
00:01:20,910 --> 00:01:25,379
Remember that the .each() method takes a
function that will be executed with every

22
00:01:25,379 --> 00:01:26,818
element in the selection.

23
00:01:31,079 --> 00:01:35,669
This function takes two optional
arguments, the index of the current

24
00:01:35,669 --> 00:01:40,902
element in the collection and the element
that is currently being looped over.

25
00:01:40,902 --> 00:01:45,600
Let's console.log to print out
the index and the href of the element.

26
00:01:45,600 --> 00:01:48,571
We can do this using
jQuery's attribute method.

27
00:02:01,238 --> 00:02:05,460
So with this code, we're getting
all of the anchor tags on the page.

28
00:02:05,460 --> 00:02:09,820
We're looping through each of them and
calling this function for each of them.

29
00:02:10,940 --> 00:02:14,500
This argument we're passing
here represents each individual

30
00:02:14,500 --> 00:02:17,460
element in the collection
as we're looping over it.

31
00:02:17,460 --> 00:02:22,187
So we're saying for
each anchor tag in this collection,

32
00:02:22,187 --> 00:02:24,656
get the anchor tag's index.

33
00:02:24,656 --> 00:02:29,282
And also select each
anchor tag with jQuery and

34
00:02:29,282 --> 00:02:36,290
get the value of its href attribute,
and then console.log all of it.

35
00:02:37,570 --> 00:02:43,660
So let's Save, Refresh the preview,
and Open Chrome DevTools.

36
00:02:43,660 --> 00:02:45,230
And awesome, it's logging.

37
00:02:45,230 --> 00:02:48,330
Here's the index and here's the href.

38
00:02:48,330 --> 00:02:52,440
Instead of logging, let's get the href of
each of these links and use the .each()

39
00:02:52,440 --> 00:02:56,730
method to display the URL in parentheses
here, next to the name of the link.

40
00:02:57,830 --> 00:03:00,330
I'm gonna name the second parameter link

41
00:03:00,330 --> 00:03:04,490
because it represents each link that we're
looping over in this collection of links.

42
00:03:06,810 --> 00:03:07,780
And delete this for

43
00:03:07,780 --> 00:03:11,630
now inside the function that we're
passing to the .each() method.

44
00:03:11,630 --> 00:03:15,920
The function that will act upon each
item in the list, I'll use the attribute

45
00:03:15,920 --> 00:03:20,630
method to get the href of the anchor tag
and save it to a variable called URL.

46
00:03:22,220 --> 00:03:24,070
Then we wanna find the link's parent.

47
00:03:26,250 --> 00:03:30,030
We can do that using a jQuery
method called .parent().

48
00:03:30,030 --> 00:03:34,257
To the parent, we'll append
the URL that we've retrieved here.

49
00:03:54,570 --> 00:04:00,710
If we look at our HTML, all the anchor
tags are nested within most items.

50
00:04:02,310 --> 00:04:05,720
So the list items
are the anchor's parents.

51
00:04:05,720 --> 00:04:10,352
So we're saying,
find each anchor tag's parent,

52
00:04:10,352 --> 00:04:14,157
the list item, and append this href to it.

53
00:04:17,059 --> 00:04:21,348
Here, where I'm using these backticks,
and this dollar sign and

54
00:04:21,348 --> 00:04:25,946
two curly braces, I'm using string
interpolation to append the value

55
00:04:25,946 --> 00:04:28,566
of the href with parentheses around it.

56
00:04:28,566 --> 00:04:32,119
String interpolation is
done using a new feature

57
00:04:32,119 --> 00:04:35,246
of ES2015 called template literals.

58
00:04:35,246 --> 00:04:39,843
And if you're not yet familiar, you can
check out a link in the teacher's notes.

59
00:04:39,843 --> 00:04:42,451
Let's Save and Preview.

60
00:04:44,742 --> 00:04:50,210
And you can see we're appending the URL
to each link with parentheses around it.

61
00:04:50,210 --> 00:04:54,090
There is a shorter and more traditional
way to write out this code.

62
00:04:54,090 --> 00:04:57,310
I did it this way just to be extra
explicit about what's happening in

63
00:04:57,310 --> 00:04:58,340
this function.

64
00:04:58,340 --> 00:05:02,528
We actually don't have to explicitly
reference the individual element in

65
00:05:02,528 --> 00:05:06,455
the function paths to each method call and
we're not using the index.

66
00:05:06,455 --> 00:05:10,576
So we can delete both arguments and
use this keyword instead.

67
00:05:14,814 --> 00:05:19,060
We can use this here and here.

68
00:05:19,060 --> 00:05:23,010
Remember when we used this
inside of a click handler?

69
00:05:23,010 --> 00:05:27,760
It's the same idea,
that this keyword in this example means

70
00:05:27,760 --> 00:05:31,220
get the href for this element.

71
00:05:31,220 --> 00:05:34,510
This meaning the current
item in the collection or

72
00:05:34,510 --> 00:05:36,810
the element associated
with the current index.

73
00:05:39,140 --> 00:05:41,600
So this does the exact same thing.

74
00:05:41,600 --> 00:05:45,020
For every item in the list,
we're using the .attr() method

75
00:05:45,020 --> 00:05:49,770
to get the href of this, this being
the current item we're working on.

76
00:05:50,830 --> 00:05:53,890
And then we're appending that
href to the items parent.

77
00:05:55,640 --> 00:05:59,000
Looping over or
iterating over a collection of things

78
00:05:59,000 --> 00:06:03,380
is a very common pattern in programming
and is particularly useful for

79
00:06:03,380 --> 00:06:07,510
performing manipulations on
a sequential list of elements.

80
00:06:07,510 --> 00:06:11,720
As a developer, you'll find
yourself doing a lot of looping.

81
00:06:11,720 --> 00:06:14,940
The .each() method can make it
that much faster and easier.