Understanding jQuery $(this).closest( element );

Question

I would just like to know what $(this) refers to when you use it within a function called by a button.

Is it referring to the button element or is it referring to the function itself.

Code example:

<div>
<span class="fileError"></span>
<input type="file" class="understanding" />
</div>

<script>
$('.understanding').click(function(){

   $(this).closest('div').find('span.fileError').html('My brain needs help');
});
</script>

Things I have tried to change the html of my span

$(this).prev('span.fileError').html();

$(this).closest('div').find('span.fileError').html();

$(this).closest('div').find('span.fileError').text();

Links I have tried:

Jquery:find input field closest to button

Understand javascripts 'this' with clarity

Finding Closest p tag to the clicked button

I have look at more places, thought I would just show those I found most informing. What do I need to do here and to what $(this) is referring within the function?

`fileupload` isn't a `jquery` event as far as I know.. You are using any library? — Guruprasad J Rao, Sep 14 '18 at 09:29
@GuruprasadRao I use the Jquery file upload library, i will change it to not confuse what the question is about — Jelly Bean, Sep 14 '18 at 09:29
https://stackoverflow.com/questions/5611233/jquery-this-selector-function-and-limitations — Zakaria Acharki, Sep 14 '18 at 09:30
You code has a syntax error! You can't use a statement in object literals! You need to use a callback function. — Ram, Sep 14 '18 at 09:31
@NegiRox, thank you. So would I be correct to assume that $(this).closest(span.fileError) would refer to the closest element with that class — Jelly Bean, Sep 14 '18 at 09:32
@undefined please review the question it is not regarding my syntax but rather which element $(this) refers to within a function. NegiRox and Jamiec have helped me understand — Jelly Bean, Sep 14 '18 at 09:41

score 4 · Accepted Answer · answered Sep 14 '18 at 09:30

4

Is it referring to the button element or is it referring to the function itself.

In jQuery event handler functions, this refers to the DOM element itself, and $(this) wraps that in a jQuery object.

But the real answer to your question of how to change the HTML of your span is going to depend on what fileupload is.

answered Sep 14 '18 at 09:30

Jamiec

133,658
13
134
193

fileupload is a function that runs my upload ajax when the file input is clicked. so in this case any errors that are returned should be written to that span. I hope this provides some clarity. – Jelly Bean Sep 14 '18 at 09:35

score 1 · Answer 2 · answered Sep 14 '18 at 09:45

It depends on what kind of function will you use as event handler:

arrow function takes this from the outer scope
normal function has this assigned to a current element when used as an event handler.

$('.understanding-arrow').click(() => {
  console.log(this === window && "this is window");

  $(this).closest('div').find('span.fileError').html('My brain needs help');
});
$('.understanding-normal').click(function() {
  console.log(this === $('.understanding-normal')[0] && "this is input el");

  $(this).closest('div').find('span.fileError').html('My brain needs help');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="fileError"></span>
  <input type="button" class="understanding-arrow" value="arrow function" />
</div>
<div>
  <span class="fileError"></span>
  <input type="button" class="understanding-normal" value="normal function" />
</div>

Understanding jQuery $(this).closest( element );

2 Answers2