Question

我有一个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");

如果我点击1st TD然后再选择4 td，则上面的代码正常工作，但如果我点击第4个td，那么它只选择第5个td。我希望它在下一行中选择另外3个td。

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

Answer 1

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/

Answer 2

您只需添加以下行的td即可。：

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

Demonstration

Answer 3

var $tds = $('table td').click(function(){
    var idx = $tds.index(this);
    $tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})

演示：Fiddle

jQuery .nextAll（）不能使用html表列

3 个答案: