jQuery .nextAll()不能使用html表列

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");

上面的代码工作,如果我点击第一个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/