检查是否单击了最后一个元素

Check if last element was clicked

本文关键字：最后一个 元素 单击 是否 检查      更新时间：2023-09-26

我试图找出是否点击了tr的最后一td。这是我的 HTML 示例： 

<table>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Clicked</td>
    </tr>
</table>

这是我目前的javascript代码（不是那样工作的）：

$('table').on('click', 'tr', function(e) {
    if ($(this).find('td').is(':last-child')){
        alert("Last td clicked!");
    }
});

注意：我需要将tr-selector用于其他目的。所以重要的是，点击是指tr .

尝试使用tr td:last-child选择器执行以下操作。

$('table').on('click', 'tr td:last-child', function (e) {
    alert("Last td clicked!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Clicked</td>
    </tr>
</table>

更新

：根据更新的问题 

$('table').on('click', 'tr', function (e) {
    if($(e.target).is(':last-child')) {
        alert("Last td clicked!");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Clicked</td>
    </tr>
</table>

你不需要那个.find()。另外，是否要检查是否单击了最后一个td或 las tr？无论哪种方式，您只需要这样做：

$('table').on('click', 'td', function(e) {
    if($(this).is(':last-child')){
        alert("Last td clicked!");
    }
});

演示

这个答案假设事件处理程序对所有<td>元素都是通用的，并且想要区分最后一个元素

在不更改事件处理程序的情况下：

事件对象保存所单击元素的引用。这可以使用。

event对象中的 target 属性包含实际单击的元素的引用。 jQuery is() 可用于检查元素是否是<tr>中的最后一个。

$('table').on('click', 'tr', function(e) {
    console.log($(e.target).is($(this).find('td:last')));
    // OR
    // console.log($(e.target).is(':last-child'));
});

演示

<td>上的绑定事件

该事件可以绑定在<table>内的<td>元素上，并且:last-child选择器可以与is()一起使用，以检查单击的元素是否是最后一个子元素。

$('table tr').on('click', 'td', function(e) {
    console.log($(this).is(':last-child'));
});

演示

将事件侦听器直接添加到最后一个子项

目录

<table>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Clicked</td>
    </tr>
</table>

爪哇语

$('table').on('click', 'tr td:last-child', function(e) {
    alert("Last td clicked!");    
});

JSFiddle

相关文章：