1 00:00:00,000 --> 00:00:01,290 All right, welcome back. 2 00:00:01,290 --> 00:00:03,630 Let's talk about looping through elements. 3 00:00:03,630 --> 00:00:07,520 And so when we have a selector of some kind, 4 00:00:07,515 --> 00:00:12,125 some sort of element, this could be one element or this could be multiple elements. 5 00:00:12,120 --> 00:00:17,310 And a good example of that is if we have like an unordered list with an ally in here, 6 00:00:17,310 --> 00:00:25,010 first item, the second item, the third item. 7 00:00:25,005 --> 00:00:28,305 And we select all of these allies. 8 00:00:28,305 --> 00:00:32,465 What if we wanted to do something different with all of these allies? 9 00:00:32,460 --> 00:00:34,530 But we still want to select all of them. 10 00:00:34,530 --> 00:00:38,790 We want to select each of these three list item elements. 11 00:00:38,790 --> 00:00:42,700 Well, if we did LI dot text, 12 00:00:42,700 --> 00:00:46,270 this is going to change it on all three of them. 13 00:00:46,265 --> 00:00:48,535 And sure enough, it did. 14 00:00:48,530 --> 00:00:50,660 That's that's not what we're looking for whatsoever. 15 00:00:50,660 --> 00:00:53,150 Maybe we want to do something different for each of them, 16 00:00:53,150 --> 00:00:55,710 but we want to use one selector. 17 00:00:55,870 --> 00:01:01,130 So we could either do LI and grab the first one. 18 00:01:01,130 --> 00:01:02,630 We can do a selector like this. 19 00:01:02,630 --> 00:01:04,880 We do first, we could do last, 20 00:01:04,880 --> 00:01:10,240 or we can loop through all of these and do something different based on one selector. 21 00:01:10,235 --> 00:01:12,805 And sometimes looping through is the right way to do things. 22 00:01:12,800 --> 00:01:14,330 It's just a faster way to do things. 23 00:01:14,330 --> 00:01:16,250 So we can say dot each. 24 00:01:16,250 --> 00:01:21,800 And this is going to take a function index. And the element. 25 00:01:21,800 --> 00:01:26,480 And that element itself is going to be this whole element in here. 26 00:01:26,480 --> 00:01:27,680 And that index is going to be, 27 00:01:27,680 --> 00:01:28,790 is it the first iteration, 28 00:01:28,790 --> 00:01:30,650 second iteration, third iteration. 29 00:01:30,650 --> 00:01:35,290 So we can now save the element itself, 30 00:01:35,285 --> 00:01:38,725 which is a lot like saying this which we've used before. 31 00:01:38,720 --> 00:01:42,940 But this is just referring to this particular element in this loop. 32 00:01:42,935 --> 00:01:52,765 Dot text is going to be index new item here. 33 00:01:52,760 --> 00:01:54,980 And so when I refresh the page, 34 00:01:54,980 --> 00:01:57,020 you can see it says 0 new item here, 35 00:01:57,020 --> 00:01:59,180 one new item here to new item here. 36 00:01:59,180 --> 00:02:02,080 Now if you're somewhat new to JavaScript and you're like, well why is it say 0? 37 00:02:02,075 --> 00:02:06,445 It's because computers technically start counting at 0 instead of the number one. 38 00:02:06,440 --> 00:02:09,470 We could always do index plus one just to offset that. 39 00:02:09,470 --> 00:02:10,550 They're Rio, new item here, 40 00:02:10,550 --> 00:02:12,370 new item here, new item here, 1-2-3. 41 00:02:12,365 --> 00:02:14,585 If we view our source, 42 00:02:14,585 --> 00:02:17,335 it's just the old stuff that we had. 43 00:02:17,330 --> 00:02:21,760 It's not the new stuff. Now we can say something like if 44 00:02:21,755 --> 00:02:27,835 the index is equal to two, select this element. 45 00:02:27,830 --> 00:02:35,830 Change at CSS to have a background color of black. 46 00:02:35,825 --> 00:02:38,095 And then we can chain these together. 47 00:02:38,090 --> 00:02:39,260 And we've done this before. 48 00:02:39,260 --> 00:02:46,310 I change the color to be white, 49 00:02:46,310 --> 00:02:48,540 so will just invert the colors. 50 00:02:50,110 --> 00:02:52,840 And it's like this one here. 51 00:02:52,835 --> 00:02:56,795 Remember 012. 52 00:02:56,795 --> 00:02:59,755 Now we don't have to do with just lies either. 53 00:02:59,750 --> 00:03:03,290 We can do it with dibs and let's go ahead and change these 54 00:03:03,290 --> 00:03:07,490 two divs is going to grab every div on the page is going to loop through them. 55 00:03:07,490 --> 00:03:09,670 Says first item, the second item, 56 00:03:09,665 --> 00:03:11,585 the third item, something went wrong there. 57 00:03:11,585 --> 00:03:13,925 Oh, because I didn't change my selector. 58 00:03:13,925 --> 00:03:15,275 There we go. 59 00:03:15,275 --> 00:03:17,975 One new item here to new item here, three new item here. 60 00:03:17,975 --> 00:03:24,215 We could even get fancier with this and we could keep its original text. 61 00:03:24,215 --> 00:03:31,555 So we can say something like Kahn's original text is equal to this element 2.txt. 62 00:03:31,550 --> 00:03:38,400 And we'll throw that in here as a variable, original text. 63 00:03:38,980 --> 00:03:42,110 And so now we haven't numbered first item, second item, 64 00:03:42,110 --> 00:03:44,980 third item with a dynamic number in there. 65 00:03:44,975 --> 00:03:47,755 Now if we wanted to, we could do anything ridiculous with this. 66 00:03:47,750 --> 00:03:53,590 We can multiply this by 303. 67 00:03:53,585 --> 00:03:55,945 There we go. So we get 036. 68 00:03:55,940 --> 00:03:57,200 We could do anything we want. 69 00:03:57,200 --> 00:03:59,780 That's just working with the index, the element itself. 70 00:03:59,780 --> 00:04:02,900 You can do anything with that element and it's just a regular selectors. 71 00:04:02,900 --> 00:04:05,840 So just remember when you're using dot h, 72 00:04:05,840 --> 00:04:09,760 It takes two elements are not elements but parameters. 73 00:04:09,755 --> 00:04:11,705 Your first one is going to be the index, 74 00:04:11,705 --> 00:04:14,095 where in the loop iteration is, 75 00:04:14,090 --> 00:04:16,040 is it the first iteration, second iteration, 76 00:04:16,040 --> 00:04:18,490 third iteration, et cetera, et cetera. 77 00:04:18,485 --> 00:04:20,525 And the second parameter is your element. 78 00:04:20,525 --> 00:04:24,805 And your element. You can then use the selector, 79 00:04:24,800 --> 00:04:27,070 which is a lot like saying this, 80 00:04:27,065 --> 00:04:30,175 but we're not really inside of the, the function. 81 00:04:30,170 --> 00:04:31,700 We don't want that to be part of the function. 82 00:04:31,700 --> 00:04:33,520 We want the element itself. 83 00:04:33,515 --> 00:04:36,715 So we select that element and then we can work with it. 84 00:04:36,710 --> 00:04:41,000 And it's going to do it for every single div that it can get its hands on, 85 00:04:41,000 --> 00:04:46,170 or every LI or every class selector, anything. 86 00:04:46,630 --> 00:04:50,900 What I would like you to do here is go ahead and give this a shot. 87 00:04:50,900 --> 00:04:55,610 I want you to select an element that hasn't multiple elements on the page. 88 00:04:55,610 --> 00:04:59,390 Do dot each function index element. 89 00:04:59,390 --> 00:05:03,980 And then I want you to either change the text or work with the index or select 90 00:05:03,980 --> 00:05:09,450 that element at least and change some of the CSS so that you know that it's working.