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.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Exercise 18: Solution" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

Alexis walks through the solution to exercise 18.

Get Unlimited Access Now

Transcript from the "Exercise 18: Solution" Lesson

>> [MUSIC]

>> Alexis: So first off, we're gonna start very similar to what we did before. Our accumulator, we're just gonna call it elements,
>> Alexis: For originality. And we know at the end of this we wanna return an instance of jQuery, so we're gonna say return $ (elements).
>> Alexis: For our for loop or for iteration, we can use our each helper.

[00:00:30] So I'm gonna iterate through each one of the items in our collection, which will give us back this type of set up. Now here's the part we care about. We wanna see if an element is not a text node. But we also want to move on and on and on.

[00:00:51] So first off we need to actually find that next sibling element. So we can say, I'm gonna call this current for the moment, because we're gonna move down this chain of next siblings potentially some say current = el.nextSibling. And then we want to say if (current.nodeType !== 3) if it's not a text node, go ahead just add this to our accumulator.

[00:01:28] So I'm gonna say elements.push(el). Else if(current.nodetype === 1) if it's DOM node, excuse me if it's not equal to 3, yes okay. I got these backwards 3.
>> Alexis: Nope, that's right. If it's not a text node, to make this more explicit, let's just make sure it's a DOM node.

[00:02:11] There we go, that's what we're going for. If the current node that we're on is a DOM node, go head and push it onto our accumulator. If it's not a DOM node go ahead and move to the next. So we'll say, move to next sibling, will come back, otherwise do nothing.

>> Alexis: And this is gonna be our set up. Okay, let me stop here for a second. Did anyone get there's working before going any further? Nobody at all, all right. So for here, now we need basically some kind of check, some kind of loop, so you can do this couple different ways.

[00:02:56] I mean use a loop, where you can move through and keep moving through until some condition is met. And then will either reach the end of the array, or the end of our next sibling, or we'll just push something onto our accumulator. So I'm gonna comment this out momentarily.

[00:03:19] Let's write this a little bit differently. I'mma do a while loop, and say while current exists and we can say current.nodeType and we wanna check for current, let me get to what this condition's gonna be here. In this loop we're gonna keep moving on and on and on.

[00:03:45] So next, current = current.nextSibling, I wanna say, if while a current element exists and current.nodeType is not equal to a DOM node, keep traversing. Let me move this out. We want to traverse, let me make sure I have that condition correct.
>> Alexis: Yeah.
>> Alexis: So from where we're at we're gonna come at the nextSibling and we're gonna say, hey, if we're on one div the next div is our current.

[00:04:47] Our current node type is equal to 1, so we don't need to traverse, so we can say if current is set at the end of this whole chain, go ahead and elements.push current. So if at some point, during this loop we're gonna keep moving until either we hit a DOM node or we've run out of stuff and current is set to null.

[00:05:17] If current exists, if current was set in this process, then we're gonna go ahead and push it onto our accumulator. We're gonna do this for each item in the collection at the end of the day we're gonna return our collection. So let's rerun this for our tests and now we have a next passing tests.