jQuery.on(）事件无法与:lt(）选择器一起使用

jQuery .on() event not working with :lt() selector

本文关键字：选择器 lt 一起 on 事件 jQuery      更新时间：2023-09-26

我正试图在除最后一个<td>之外的每个表数据<TD>上生成点击事件，但它只处理第一行，而不是其他行。

HTML:

<table class="table" style="width:100%;">
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

JS代码：

$('.table tbody').on('click', 'tr td:lt(3)', function(){
    // Trying to check the click event
    console.log('working');
});

JSFIDDLE

jsfiddle

如果我删除:lt(3)选择器，那么它可以正常工作，但我不知道为什么它不能使用小于选择器？

这就是:lt（）选择器的工作方式：

与索引相关的选择器（包括此"小于"选择器）筛选与以下表达式匹配的元素集在他们之前。他们根据元素。例如，如果元素是第一个使用类选择器（.myclass）选择，并且有四个元素返回时，这些元素的索引为0到3这些选择器的目的。

在您的情况下，首先匹配tr td，它匹配16个单元格，然后过滤结果集中的前3个元素。你可以这样修改代码：

// trap clicks on .table tbody and filter all td elements
$('.table tbody').on('click', 'td', function () {
    if ($(this).index() < 3) {
        console.log('working');
    }
});

或者更好的方法是，使用CSS3:nh-child（）选择器，它也可以在jQuery:中使用

// trap clicks on .table tbody and filter all td elements
// that are "-n+3"th child of their parent
$('.table tbody').on('click', 'td:nth-child(-n+3)', function () {
    console.log('working');
});

这里解释第n个子选择器。

您也可以进行

$('.table tbody tr').on('click', 'td:lt(3)', function(){
    console.log('working');
});

如果你不这样做，它将使用所有tbody中的前3个td，而不是每行中的一个（你可以用5而不是3来尝试你的代码，看看会发生什么：它将应用于tr1:td1、td2、td3、td4和tr2:td1（tbody的前5个td）

jsfiddle

相关文章：