Question

我正在尝试在每个表格数据<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)选择器，那么它的工作正常，但我不知道为什么它不能用少于选择器？

Answer 1

嗯，这就是:lt() selector的工作原理：

与索引相关的选择器（包括此＆＃34;小于＆＃34;选择器）过滤与表达式匹配的元素集在他们之前。他们根据的顺序缩小设定范围此匹配集中的元素。例如，如果元素是第一个选择了一个类选择器（.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 :nth-child()的also available in 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个孩子选择器是explained here。

Answer 2

您也可以

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

如果你不这样做，它将占用所有tbody的前3个td，而不是每行中的一个（你可以用5而不是3来尝试你的代码，看看发生了什么：它将应用于tr 1：td 1，td 2，td 3，td 4和tr2：td 1（tbody的前5 td）

jsfiddle

jQuery .on（）事件不能使用：lt（）选择器

2 个答案: