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 Practice Working with jQuery Collections !
You have completed Practice Working with jQuery Collections !
Preview
This video covers one solution to the challenge.
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
How did it go?
0:00
If you found some of this to be
challenging, that's perfectly okay.
0:01
As with most things, when it comes to
coding, the more practice, exposure, and
0:05
time you spend, the more and
more it will sink in.
0:09
So keep at it.
0:11
The first challenge reads, add a featured
tag to the second item in the list.
0:13
Append a new span element containing
the word featured to the list item.
0:18
Add a class of featured
to the new span element.
0:23
So this is two parts.
0:27
For the first part,
0:31
I use the equals method to traverse
to the second list item, passing in
0:33
a 1 because the items in a jQuery
collection are zero index like an array.
0:37
Then to the equals method,
I changed an append method.
0:43
Inside the append method, I created a new
span element containing the text featured.
0:46
Here, I also could have created
the element separately and
0:52
saved it to a variable, then pass
the variable into the append method.
0:55
So that's totally fine
if you did it that way.
0:59
Now you can see that next to the second
list item it says featured, but
1:04
that's not exactly the look
that we're going for.
1:08
Which brings us to the second part.
1:13
For the second part, I selected
the span element I just created, and
1:16
used the add class method to
add a class of featured to it.
1:20
That gives it the styling
that we're looking for.
1:24
Okay, let's look at the second challenge.
1:30
It reads add a class of new
to the last item in the list.
1:33
You can traverse to the last item or
1:37
find a jQuery method that helps you
select the last item in the list.
1:39
There are several ways to do this, and
I'll just go through a few really quickly.
1:44
We can use the equals method to select
the fourth and last item in the list.
1:52
And then use the add class
method to add a class of new.
1:57
We can use the last or
last child pseudo selector.
2:09
Or we can use the last method like so.
2:13
And there are probably more
ways to do it as well.
2:18
Number 3, add an attribute to each link so
that all anchor tags open in a new tab.
2:23
I selected each anchor tag on the page,
and used the attribute or adder method
2:31
to add an attribute called target, and
set the attribute's value to blank.
2:36
Now let's save and refresh.
2:43
And each of these should
open in a new tab.
2:45
Number four, select and
print the index and
2:56
text of each anchor tag to the console.
2:59
For this one, first I select all anchors
3:02
on the page by tag name, and call the each
function on my collection of anchor tags.
3:06
To the each method,
I pass an anonymous callback function,
3:12
passing in the index of each tag we're
looping through, as well as the word item,
3:16
which represents each individual
item in the jQuery collection.
3:21
Inside the function I log out the text of
each link by selecting it with jQuery and
3:25
then calling the text method on it.
3:29
If I open up Chrome Dev Tools,
here's the index and
3:35
here's the text of each
item we're looping through.
3:38
Finally, for question 5 it says, refactor
question 4 using the this keyword.
3:43
So let's copy and paste question 4.
3:49
And I'll get rid of item as an argument
because we no longer need it.
3:52
And inside of the function, instead of
item, we'll replace it with this keyword.
3:57
Then we should see all these
printouts twice, which they do.
4:06
Awesome.
4:10
Remember, you may have done things
a bit differently, and that's great.
4:12
Part of what makes coding fun is that
there are often multiple ways to tackle
4:16
a problem.
4:19
Keep practicing and
I'll see you next time.
4:21
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