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 17: Adding a find() method" 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:

Elements have the same query methods as the document object. In this exercise, you will implement a find() method that will return items within the current element.

Get Unlimited Access Now

Transcript from the "Exercise 17: Adding a find() method" Lesson

>> [MUSIC]

>> Justin Meyer: Next exercise related to finding elements. Kinda given one element, or trying to find an element that matches the selector, is elements provide a way to go from that element to other elements. The same way you can go from the document to find any element in the page.

[00:00:21] You can start at one element and then go find elements inside of it. So element even though it really doesn't make sense has every element has a getElementById method. They also have getElementsByTagName, so this will find all elements inside this element that match this tag. Similarly they have getByClassName all classes, all elements that match this class name within this element.

[00:00:44] And they have a querySelector and querySelectorAll, this last one is important for what we're about to do. Which is jQuery's find method that finds all elements within the collection that match a certain selector. Sorry, all elements of the children of item is in the collection that match a given selector.

[00:01:10] So what that means, I'll show in a second, is if I want to get every div, I could get every div in the page. And then what this would do is for every single div I found, look for images inside of it, image tags inside of it and return a list of all of those.

>> Justin Meyer: So to do this one, there's two things you need to do. First you need to go through your collection or write it out again. You go through your collection and for every element in your collection, find all the elements that match the passed in selector. And then given all those elements, you're gonna do that for every single element.

[00:01:56] So you're gonna get a list of elements for every source elements, so for every div, you might have multiple images. And then you've got to combine them all into one big array. And that array that you have, you want to make that, turn that into a instance of $.

[00:02:17] So you need to make the $ function not only be able to take a string, but take an array. So that, given an array, instead of a string, it's just gonna take those items and essentially copy them to an instance of $. Just like we were doing with the elements that were retrieved.

[00:02:36] So let me step through that again with writing.
>> Justin Meyer: So here's our find method.
>> Justin Meyer: You're going to have to create some kind of accumulator or something like that. That's an array of all of the total items found for every single item in the original collection.
>> Justin Meyer: This will be like an array and then you're gonna have to go for each item in collection.

[00:03:08] You're gonna have to get elements that are within the item for each element. Elements that are within the element that match selector and then you're gonna have to add them to accumulator. And at the end of this, what you're going to want to be able to do, I'm just gonna give you this kind of part, your accumulator is gonna look like elements, it's gonna be an array.

[00:03:46] And, at the end of this what you're going to want to be able to do is return $(elements). You're gonna want to take this array of elements, and create a $ out of it. I'll come right back down to this, so, if you're copying, I'll leave it on this.

[00:04:04] Let me talk about how $ is gonna have to change. So $ really only expects a selector. I'm gonna remove these other comments, the old ones and only expect selector to be a string. So what you really wanna do is something like if selector is a string, you're gonna want to do this, otherwise, assume it's array for now.

[00:04:38] We might change it later so we can work with something that's not an array. And just treat those elements that were passed in, selector's gonna be an array of elements. We will just treat it due to each one of those elements, what's going on with elements right here.

>> Justin Meyer: Basically all you really need to do is say elements = selector.
>> Justin Meyer: So this part is kind of weird to think about but not too hard, this might be a little trickier down here. We'll make this one kind of longer cuz we went quickly through get text, so we'll do like 10, or let's do 12 minutes.

[00:05:26] Anybody have any questions before we begin?
>> Speaker 2: Can I see what you added to the selector, to the dollar function?
>> Justin Meyer: All I added was a comment that said if selector is a string you're gonna do what you used to be doing. And otherwise if it's not a string, you can just basically assume it's an array.

[00:05:45] And you really just want, this is really an array of items at this point. Well just, you're just gonna say well elements is that and then just go through the elements essentially.
>> Justin Meyer: All right, you're making this function work if it's been passed a string or passed an array.

[00:06:04] If it was passed an array, well you don't need to query the DOM. You've already been given your elements, so just put those elements on this, the way that you're already doing. Let me make one more thing clear that I didn't. The reason for this is so that you can call, I can call a div, find every div, then find every image in it if I wanted.

[00:06:30] And eventually I could, well not image let me find every div then I'll find a variable, let's say I'm finding every anchor in it. And I can change the text to("whatever I feel like") right, because we wanna make sure find is going to return a jQuery instance. So, that we can keep chaining like this, that's why we have to make $.

[00:06:57] It's not good enough just to return the elements. We wanna return those elements wrapped in jQuery.