How to get DOM element in jQuery

Question

I would like to get result that is clicked DOM element.

When I try below code, it return jQuery object.

my desired result is like this

<td>1</td> ← clicked DOM element

Are there any method to get this?

 jQuery($ => { $('td').on('click', function() { console.log($(this)); }) });

 td { padding:5px; border:solid black 1px;} table{ border-collapse:collapse;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Answer 1

Just change $(this) to this

 jQuery($ => { $('td').on('click', function() { console.log(this); }) });

 td { padding:5px; border:solid black 1px;} table{ border-collapse:collapse;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Answer 2

Just don't wrap this in JQuery.

 jQuery($ => { $('td').on('click', function() { console.log(this); }) });

 td { padding:5px; border:solid black 1px;} table{ border-collapse:collapse;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Answer 3

You can try something like this:

 $(document).ready(function() { $('td').on('click', function() { /* your click event */ console.log("you clicked", this); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Answer 4

Just change console.log($(this)) to console.log(this) in your click event.

Because JQuery using only this not wrapped $(this) .