Как получить элемент DOM в jQuery

Question

Я хотел бы получить результат, по которому щелкают по элементу DOM.

Когда я пытаюсь выполнить приведенный ниже код, он возвращает jQuery объект.

Мой желаемый результат похож на этот

<td>1</td> ← щелкнул элемент DOM

Есть ли способ получить это?

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

Только не заворачивайте this в 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 2

Вы можете попробовать что-то вроде этого:

$(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 3

Просто измените $(this) на 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 4

Просто измените console.log($(this)) на console.log(this) в вашем событии клика.

Поскольку JQuery использует только this, а не обернутый $(this).