如何在 jQuery 中获取 DOM 元素

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

只需更改$(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 3

你可以尝试这样的事情：

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