Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
An introduction to jQuery's handy .each() method.
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
Fantastic work so far,
we've nearly made it to the end.
0:00
And you're familiar enough with
jQuery to work with it in the wild or
0:03
use it to make quick
work of smaller projects.
0:07
Let's talk about how jQuery can help you
with another way to traverse through a set
0:10
of elements.
0:14
Not to mention one of the most common
task you'll perform as a developer,
0:15
looping through a collection of items.
0:19
If you're taking this course,
chances are you've written a for loop and
0:22
are at least somewhat familiar
with this slightly tedious drill.
0:25
For let i = 0, i is less than
collection.length and so on.
0:29
Let's look at a simplified way to do
this in jQuery, the .each() method.
0:35
With jQuery's .each() method, much of
the complexity of the for loop is removed.
0:40
You don't need to keep track of an index
or have three statements on one line.
0:45
Instead, the .each() method iterates
through all of the elements for you and
0:49
you pass it to a function that will
act on each element in the collection.
0:53
In other words,
0:57
this function will be called as many times
as there are items in the collection.
0:58
To see how this works, let's open
up the newsfeed example again and
1:02
let's log out the href of
every link on the page.
1:07
First, we select all the links,
Then we call the .each() method.
1:13
Remember that the .each() method takes a
function that will be executed with every
1:20
element in the selection.
1:25
This function takes two optional
arguments, the index of the current
1:31
element in the collection and the element
that is currently being looped over.
1:35
Let's console.log to print out
the index and the href of the element.
1:40
We can do this using
jQuery's attribute method.
1:45
So with this code, we're getting
all of the anchor tags on the page.
2:01
We're looping through each of them and
calling this function for each of them.
2:05
This argument we're passing
here represents each individual
2:10
element in the collection
as we're looping over it.
2:14
So we're saying for
each anchor tag in this collection,
2:17
get the anchor tag's index.
2:22
And also select each
anchor tag with jQuery and
2:24
get the value of its href attribute,
and then console.log all of it.
2:29
So let's Save, Refresh the preview,
and Open Chrome DevTools.
2:37
And awesome, it's logging.
2:43
Here's the index and here's the href.
2:45
Instead of logging, let's get the href of
each of these links and use the .each()
2:48
method to display the URL in parentheses
here, next to the name of the link.
2:52
I'm gonna name the second parameter link
2:57
because it represents each link that we're
looping over in this collection of links.
3:00
And delete this for
3:06
now inside the function that we're
passing to the .each() method.
3:07
The function that will act upon each
item in the list, I'll use the attribute
3:11
method to get the href of the anchor tag
and save it to a variable called URL.
3:15
Then we wanna find the link's parent.
3:22
We can do that using a jQuery
method called .parent().
3:26
To the parent, we'll append
the URL that we've retrieved here.
3:30
If we look at our HTML, all the anchor
tags are nested within most items.
3:54
So the list items
are the anchor's parents.
4:02
So we're saying,
find each anchor tag's parent,
4:05
the list item, and append this href to it.
4:10
Here, where I'm using these backticks,
and this dollar sign and
4:17
two curly braces, I'm using string
interpolation to append the value
4:21
of the href with parentheses around it.
4:25
String interpolation is
done using a new feature
4:28
of ES2015 called template literals.
4:32
And if you're not yet familiar, you can
check out a link in the teacher's notes.
4:35
Let's Save and Preview.
4:39
And you can see we're appending the URL
to each link with parentheses around it.
4:44
There is a shorter and more traditional
way to write out this code.
4:50
I did it this way just to be extra
explicit about what's happening in
4:54
this function.
4:57
We actually don't have to explicitly
reference the individual element in
4:58
the function paths to each method call and
we're not using the index.
5:02
So we can delete both arguments and
use this keyword instead.
5:06
We can use this here and here.
5:14
Remember when we used this
inside of a click handler?
5:19
It's the same idea,
that this keyword in this example means
5:23
get the href for this element.
5:27
This meaning the current
item in the collection or
5:31
the element associated
with the current index.
5:34
So this does the exact same thing.
5:39
For every item in the list,
we're using the .attr() method
5:41
to get the href of this, this being
the current item we're working on.
5:45
And then we're appending that
href to the items parent.
5:50
Looping over or
iterating over a collection of things
5:55
is a very common pattern in programming
and is particularly useful for
5:59
performing manipulations on
a sequential list of elements.
6:03
As a developer, you'll find
yourself doing a lot of looping.
6:07
The .each() method can make it
that much faster and easier.
6:11
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