Looping through a jQuery collection6:15 with Treasure Porth
An 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
You need to sign up for Treehouse in order to download course files.Sign up