0

我有一个如下的html表：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>

单击一个 td 我正在更改它的下一个 4 个 td 的颜色，为此我在 jquery 中完成了如下操作：

$(this).nextAll("td").slice(0, 4).addClass("selected");

如果我单击第一个 TD，则上面的代码有效，然后它会选择另外的 4 个 td，但是如果我单击第 4 个 td，那么它只会选择第 5 个 td。我希望它也可以在下一行中选择另外 3 个 td。

请告诉我如何解决这个问题？

4

3 回答 3

10

jQuery.index()方法返回当前集合中传递的元素的索引。通过使用返回的索引你可以.slice()收集，这比每次点击查询 DOM 更有效，特别是当你有一个大表时：

var $tds = $('#table td').on('click', function() {
   var i = $tds.index(this);
   $tds.slice(++i, i+4).addClass("selected");
});

http://jsfiddle.net/MamYX/

于 2013-09-13T09:29:23.840 回答
3

您可以简单地添加td下一行。：

$(this).nextAll("td").add($(this).closest('tr').nextAll().find('td'))
       .slice(0, 4).addClass("selected");

示范

于 2013-09-13T09:29:01.183 回答
2 
var $tds = $('table td').click(function(){
    var idx = $tds.index(this);
    $tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})

演示：小提琴

于 2013-09-13T09:25:13.343 回答