One Solution4:24 with Treasure Porth
This video covers one solution to the challenge.
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 up