- jQuery-Specific Selectors 8:22
- Working with jQuery-Specific Selectors 1 objective
- Changing Element Properties 4:46
- Changing Element Styles and Classes 3:20
- Adding/Removing Classes 2 objectives
- Stopping the Browser's Default Behavior 8:11
- Looping through a jQuery collection 6:15
- The .each() method 1 objective
- Conclusion 3:19
- Working with jQuery Collections Review 5 questions
Preview
Video Player
00:00
00:00
Looping through a jQuery collection
6:15An introduction to jQuery's handy .each() method.
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