All right, welcome back.
Let's talk about looping through elements.
And so when we have a selector of some kind,
some sort of element, this could be one element or this could be multiple elements.
And a good example of that is if we have like an unordered list with an ally in here,
first item, the second item, the third item.
And we select all of these allies.
What if we wanted to do something different with all of these allies?
But we still want to select all of them.
We want to select each of these three list item elements.
Well, if we did LI dot text,
this is going to change it on all three of them.
And sure enough, it did.
That's that's not what we're looking for whatsoever.
Maybe we want to do something different for each of them,
but we want to use one selector.
So we could either do LI and grab the first one.
We can do a selector like this.
We do first, we could do last,
or we can loop through all of these and do something different based on one selector.
And sometimes looping through is the right way to do things.
It's just a faster way to do things.
So we can say dot each.
And this is going to take a function index. And the element.
And that element itself is going to be this whole element in here.
And that index is going to be,
is it the first iteration,
second iteration, third iteration.
So we can now save the element itself,
which is a lot like saying this which we've used before.
But this is just referring to this particular element in this loop.
Dot text is going to be index new item here.
And so when I refresh the page,
you can see it says 0 new item here,
one new item here to new item here.
Now if you're somewhat new to JavaScript and you're like, well why is it say 0?
It's because computers technically start counting at 0 instead of the number one.
We could always do index plus one just to offset that.
They're Rio, new item here,
new item here, new item here, 1-2-3.
If we view our source,
it's just the old stuff that we had.
It's not the new stuff. Now we can say something like if
the index is equal to two, select this element.
Change at CSS to have a background color of black.
And then we can chain these together.
And we've done this before.
I change the color to be white,
so will just invert the colors.
And it's like this one here.
Remember 012.
Now we don't have to do with just lies either.
We can do it with dibs and let's go ahead and change these
two divs is going to grab every div on the page is going to loop through them.
Says first item, the second item,
the third item, something went wrong there.
Oh, because I didn't change my selector.
There we go.
One new item here to new item here, three new item here.
We could even get fancier with this and we could keep its original text.
So we can say something like Kahn's original text is equal to this element 2.txt.
And we'll throw that in here as a variable, original text.
And so now we haven't numbered first item, second item,
third item with a dynamic number in there.
Now if we wanted to, we could do anything ridiculous with this.
We can multiply this by 303.
There we go. So we get 036.
We could do anything we want.
That's just working with the index, the element itself.
You can do anything with that element and it's just a regular selectors.
So just remember when you're using dot h,
It takes two elements are not elements but parameters.
Your first one is going to be the index,
where in the loop iteration is,
is it the first iteration, second iteration,
third iteration, et cetera, et cetera.
And the second parameter is your element.
And your element. You can then use the selector,
which is a lot like saying this,
but we're not really inside of the, the function.
We don't want that to be part of the function.
We want the element itself.
So we select that element and then we can work with it.
And it's going to do it for every single div that it can get its hands on,
or every LI or every class selector, anything.
What I would like you to do here is go ahead and give this a shot.
I want you to select an element that hasn't multiple elements on the page.
Do dot each function index element.
And then I want you to either change the text or work with the index or select
that element at least and change some of the CSS so that you know that it's working.