Unsure why function using $(this) doesn't work

Question

I have a function entitled changeSize() which i want to change the size of the div / span etc that it is used next to. Here is my code:

function changeSize(width, height) {
    $(this).css('height', height);
    $(this).css('width', width);
}

$('#square').changeSize(200, 200);

I presumed that the changeSize would replace (this) with ('#square') because it is used next to the function - but it doesn't

`changeSize` is just a function and has nothing to do with a jquery object — PeeHaa, Mar 30 '16 at 16:55
functions and methods don't work that way. It could work that way if you called it like this: `changeSize.call($('#square').get(0), 200, 200);`, but you should just extend jQuery. https://jsfiddle.net/obwLj7kq/ — Joseph Marikle, Mar 30 '16 at 16:58

score 4 · Answer 1 · answered Mar 30 '16 at 16:57

4

Your changeSize function is not a method on the jQuery object. You would need to pass the element as a parameter.

function changeSize(element, width, height) {
  element.css('height', height);
  element.css('width', width);
}

changeSize($('#square'), 200, 200);

answered Mar 30 '16 at 16:57

Guy

If `changeSize` is called from an event listener, `$(this)` is applicable to the element that called the event. – Sterling Archer Mar 30 '16 at 16:58
@SterlingArcher of course, but OP didn't mention anything about triggering on an event – Guy Mar 30 '16 at 16:58

1 Answers1