This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Implementing the prev() method" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Alexis Abril: For previous since previous is really, really straightforward, let's do previous together. Now we had a bunch of different traversal DOM properties. nextSibling is one, previousSibling is another one. So just like we did for HTML and val, the easiest way to kinda do this is just copy what we have here.
[00:00:29] And I'm gonna copy it into our previous, so I'm gonna say previous, previous and this is gonna do the same exact logic. It's just gonna go in the other direction from wherever we start. I'll leave that up for a split second, hope people are typing it out.
>> Alexis Abril: And just to make sure this is working, I'm gonna run over to our test page.
[00:00:55] And now you can see we have next and previous, both chainable. They're both returning jQuery objects, and they're both traversing down the DOM accordingly, so,
>> Alexis Abril: Okay, we also have parent and children. Now parent and children are nice, because we don't have to keep moving one way or the other.
[00:01:24] Children is really nice, because now we have that additional DOM property called children, so let's do parent first. So for parent, we're going to need to, let's think about this verbally first. We need to, let's say you have $div.parents. That's gonna find all the divs on the page, and return their parent elements in another jQuery collection respectively.
[00:01:52] So first thing off the bat, we're going to need our accumulator. Let me scoot this up the screen for you guys. And at the end of this function, we're going to want to return,
>> Alexis Abril: A jQuery representation of our array. We know we are gonna need to iterate through each element in our collection.
[00:02:18] So this, function(i, el).
>> Alexis Abril: And within this, we need to find the current element's parent, and then push it onto our accumulator. Now this one is pretty straightforward, I'm gonna type out a comment here. el is our DOM element, and parentNode is our DOM property that points to the parent DOM element.
[00:02:47] Can anyone in the room or online think of what we should put within this each?
>> Alexis Abril: Anybody at all?
>> Speaker 2: [INAUDIBLE]
>> Alexis Abril: No, if we have, elements the accumulator will just be an array of DOM elements that we find. So el is the current DOM element that we're at in our collection, maybe it's an li.
[00:03:18] The parent node would be a reference to that li's parent, a ul most likely. So what we want to do is push that ul onto our accumulator. We want to save it, say hey, this element that we're on, its parent is ul, then it's going to move on to the next.
[00:03:37] Maybe the next element in our collection is a div. Your parent is a body, it's the body tag. We're gonna go through collecting all of these parents onto our accumulator. So for this, all we need to do actually is elements.push(el.parentNode).
>> Alexis Abril: So let me refresh there, and now we have passing set of assertions for parents.
[00:04:15] Is there a lot of questions? Hey Justin can you help me with questions in the chat?
>> Speaker 3: [INAUDIBLE]
>> Alexis Abril: No, no, no, I mean, can you hop in the chat?
>> Speaker 3: Yeah.
>> Alexis Abril: We apologize, we wanna get to events, so we're gonna start tag teaming this a little bit, blaze through this.
[00:04:33] Okay, was there any questions on, go ahead.
>> Speaker 4: They want you to you go through next again.
>> Alexis Abril: Go through next again?
>> Speaker 4: Yeah just walk through how that works.
>> Alexis Abril: Sure, of course. This is good to understand, because pretty much most of these, you can see now, we're getting to this pattern of finding an accumulator, or creating an array.
[00:04:53] We're gonna accumulate objects, iterate through them, and based on some conditions push onto that array, and then eventually return a jQuery representation of that array. So for this, that's the first thing we're starting out with. Let's start maybe from the outside in. So if you talk about the first part, var elements = array, this is just where we're gonna store all the elements that we find, all the elements that we care about.
[00:05:20] Then we're gonna go through each item in our collection and we're gonna invoke our conditions on it. In this case for next, for each item in our collection, we want to find its next sibling, whatever the element right next to it is. So what we're going to do first is say, current = el.nextSibling.
[00:05:43] Now if the next sibling in our collection is a DOM element, this while loop won't even execute. It's going to come here and say current, well that exists so that's going to be true. current.nodeType !== 1, well, if it is a DOM node, then it will be 1.
[00:06:01] So this will fail, it'll skip the while loop entirely, say if current, which does exist, elements.push, our current element. So, immediately if the next sibling is a DOM node, it basically skips from line 159 all the way down to 166, and just pushes that DOM node onto the array.
[00:06:25] If it isn't a DOM node, maybe it's a text node, it's gonna start this while loop until it finds a DOM node, or until it runs out of nodes that are nextSiblings. So one of those two conditions are gonna happen in this loop. It's either gonna eventually come to the end of its container, or it's gonna find something that we care about.
[00:06:48] In either event, once it finishes, if something was found we push it onto our array. And at the end of this, we return an accumulated array of all of the nextSiblings in our collection.
>> Alexis Abril: This is the same thing we do for parent child and previous, this is just the most complex, this and previous are the most complex versions of this.
[00:07:14] Because we have to keep going to the nextSibling, and then the nextSibling, and so on and so forth.
>> Alexis Abril: I hope that answered some of the questions there, yes go for it.
>> Speaker 5: Super quick, could I see the previous function?
>> Alexis Abril: Of course.
>> Speaker 5: And you're just switching out the next for the previous, right?
[00:07:36]
>> Alexis Abril: Exactly, you're gonna still have the same starting point, and you're gonna have the same conditions and same logic. You just wanna go into a different direction. Good question.