What is "this" inside the event .on('click', 'class', function () {})

Question

I try to have access to the row i clicked to add or remove a class, but it seems like i misinterpreted the value of this. Isn't it supose to be the DOM where the event go called (in this case, the <li>)? Here is my code:

JAVASCRIPT

$(document).on('click', '.ToDownload', function() 
        {
            if($(this).className.lastIndexOf("isSelected") != -1)
            {
                $(this).addClass("isSelected");
                $(this).css('border', '2px solid #000099')
            }
            else
            {
                $(this).removeClass("isSelected");
                $(this).css('border', 'none')
            }
        });

HTML

<li id="addedDownloadFileRow" class="fitting ToDownload">
    <a href="#">
        <div class="ui-grid-a">
            <div class="ui-block-a">test1</div>
            <div class="ui-block-b">test2</div>
        </div>
    </a>
</li>

In fact, i thought i could use the property className to find if my row is already selected, but it seems like this isnt the DOM of the <li> tag. Any information or a way to see what this really is would be appreciated.

P.S. The class "fitting" is only used for some css purpose.

@azium presumably because of the `'.ToDownload'` in the call to `on()` — CupawnTae, Oct 29 '15 at 19:57
And `console.log(this)` or `console.dir(this)` will pretty much tell you what you want. — azium, Oct 29 '15 at 19:57
I would use `if($(this).is(".isSelected"))` to check if the element is selected instead — Musa, Oct 29 '15 at 19:57
"this" is referring to the current element and the basic syntax is: `$(selector).action()` — Adam Buchanan Smith, Oct 29 '15 at 19:58

score 2 · Accepted Answer · answered Oct 29 '15 at 20:03

2

this is a DOM Element, $(this) is a jQuery object

Full working code is in http://jsfiddle.net/tomi77/xgv8q9md/

answered Oct 29 '15 at 20:03

Tomasz Jakub Rup

10,502
7
48
49

Thanks alot! This short and clear answer was exactly what i needed. – MacGruber Oct 30 '15 at 12:43

Dan Prince · Answer 2 · 2015-10-29T20:01:14.227

0

If you use Chrome (not sure whether this works in Firefox), you can log the value of this to the console.

If it is a jQuery object, it might not be clear to see which element it refers to, however it's straightforward to get the underlying element out.

console.log(this[0]);

This will give you a minimal representation of the element itself and if you hover over it, you'll see the element highlighted in the web view itself.

This lets you see exactly which element it refers to. As mentioned in the comments, you can also log the direct object form of the element to the console with console.dir(element).

edited Oct 29 '15 at 20:01

answered Oct 29 '15 at 19:59

Dan Prince

29,491
13
89
120

`console.dir(this[0])` on elements gives you more information about the node object which is useful. – azium Oct 29 '15 at 19:59

What is "this" inside the event .on('click', 'class', function () {})

2 Answers2