Question

我的html看起来大致如下：

<tr id="row">
  <td id="cell_1">Cell 1</td>
  <td id="cell_4">Cell 4</td>
  <td id="cell_8">Cell 8</td>
  <td id="cell_9">Cell 9</td>
  <td id="cell_11">Cell 11</td>
  ...
</tr>

我无法改变它。例如，我有一个变量cell，它指向代表第二个td的jQuery对象，我想在n之后得到cell个单元格的元素。获得它的一种方法是：

var cell = $("#cell_4");

var next = cell;
for (var i = 0; i < n; i++) {
  next = next.next();
}

但我认为这不是最合适的方式，因为它需要通过DOM进行n次“移动”。我想到的另一种方法是使用index()方法（未经过测试，因此它可能包含一些错误，但我认为该方法是可以理解的）：

var index = $("#row > td").index(cell);
var next = $("row td:nth-child(" + index + n + ")");

是否有“更好”的内置方式来实现这一结果？例如，看起来像这样的东西：

var next = cell.nextTimes(n);

Answer 1

由于问题中的单元格具有id值，如果您可以从您开始的位置推导出所需的值，则可以使用$('#cell_' + derivedValue)。

但如果你不能这样做，你可以使用nextAll和eq：

var next = cell.nextAll().eq(n); // Or `n-1`, depends on what `n` is

nextAll返回所有元素的跟随（下一个）兄弟姐妹，eq将匹配的集合减少到给定索引处的元素。

例如，在您的示例中从cell.nextAll().eq(1)开始的cell_1将返回 cell_8（cell_4将为cell.nextAll().eq(0)）。

Live example

Answer 2

您可以使用nextAll()方法并使用:eq(n)选择器（或eq()方法）进行选择。

您可以像这样自己编写nextTimes()方法;

jQuery.fn.nextTimes = function (n) {
    return this.nextAll().eq(n);
}

Answer 3

var next = cell.nextAll(':eq('+n+')');

Answer 4

如果当前单元格加上 n 超出当前行的末尾，您没有说要做什么，但从一般意义上说，您可以按索引获取单元格没有 jQuery，如果你使用普通的DOM .cellIndex属性来获取当前单元格的索引，然后只需将 n 添加到那个并使用结果作为父进程的索引tr元素的.cells集合：

// given your existing jQuery object for the current cell:
var cell = $("#cell_4");

// cell[0] is the actual DOM element, cell[0].cellIndex is
// its position within the row, so n cells after is:
cell[0].parentNode.cells[cell[0].cellIndex + n]

// or as a jQuery object:
$(cell[0].parentNode.cells[cell[0].cellIndex + n])

或者作为一个狡猾的jQuery插件，我相信你可以整理一下：

$.fn.nextTimes = function(n) {
    var c, i;
    if (this.length > 0) {
        c = this[0];
        i = c.cellIndex + n;
        if (i < c.parentNode.cells.length)
           return $(c.parentNode.cells[i]);
    }
    return $([]);
};


var next = cell.nextTimes(n);

.nextTimes()的工作演示：http://jsbin.com/atusiy/2/edit

（显然.nextAll()可以按照其他答案来解决问题，但是如果你做了很多，DOM方法应该更快，如果你做了很多，你还是需要你自己的插件方法...）

有没有办法得到与链接几个.next（）方法相同的结果？

4 个答案: