In the scope and context, seeing the same sub folder, open up the file, scope and context seeing the same two. So as you've seen a number of times in the class, here, we're iterating, all of these salespeople, and we're using the each each method on the each Li, and we're creating a reference to the particular Li or list items. So we're doing that by creating a variable called item. And that's equal to this. And as we know, this callback is executed in the context of the list item. So that kind of makes sense.
We're using this wrap with jQuery, and we're setting it equal to item and then we're saying item, find a select button, and then we're setting up the click handler for the click event handler for that Select button. So if you look at the next file, scope and context seeing the same three, we're accomplishing the same thing, but we're doing it differently. We're getting a hold of this second argument that's passed to the callback function. called DOM element, and we're wrapping it with jQuery. So we're saying item equals DOM element wrapped with jQuery. So let's take a look at what DOM element really is.
So back in you the web page, execute the example. Scope was shooting. When scope and context feel the same three. Okay, so I get a bunch of console outputs. And they're all the, almost the same thing. But you can see, it's Li salesperson, zero Li salesperson, one on salesperson two, and so forth.
So what's happening is, in each one of those cases, we're outputting a DOM element. So the point here is that this DOM element that you see in the console represents each of the list items or each of the salespeople DOM elements that we're iterating over. So this call back when you call it Each method, the callback receives two arguments. first argument is index, which is the numerical index of the element. And the second argument is the element itself. So in this case, it's kind of, if feels it's sort of where scope and context feel like the same thing in that we're creating a variable.
But what we're setting the variable to is the current DOM element over which we're iterating, which really is more of a context thing, because it's like when we use the word this earlier, it's the context of this method of this function is the DOM element that we're iterating over which is DOM elements. So this is a situation where it's kind of scope and context in the same line on line. 10. Item is definitely a variable that's scope. But then we're setting equal to an object, which is the context of which or context Which this function is being executed. Now, if you look at the file scope and context seem the same for, we're doing something a little bit different down here.
If you look, look back at three again and look at how we executed the toggle class method. We said salesperson underscore plus index will index as a variable. So we're using scope here to get a hold of the current element. So salesperson zero salesperson wants this person to and so forth. But in example, number four, we're just saying item we're using the item method we used appear which that's also a variable. But in a way, it's like we're scoping context are kind of having that fuzzy line because we're, we're setting the variable equal to the context on which this function is executed.
So in a way, we're kind of using scope a in context here at the same time, it's a variable item as a variable, but that item with a variable item variable is set to the context on which this function is being executed.