0

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

4

2 回答 2

4

好吧，这就是: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');
    }
});

或者更好的是，使用在 jQuery 中也可用的CSS3 :nth-child()选择器：

// 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 个子选择器。

于 2013-08-22T08:20:51.930 回答
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

于 2013-08-22T08:13:04.927 回答