Есть ли способ получить тот же результат, что и цепочка нескольких методов .next ()?

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, которая указывает на объект jQuery, представляющий второй td, и я хотел бы получить элемент, который составляет n ячеек после cell. Один из способов получить это будет:

var cell = $("#cell_4");

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

Но я думаю, что это не самый правильный путь, поскольку для него требуется n количество «ходов» через DOM. Другой способ, которым я мог придумать, заключается в использовании метода 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)).

Живой пример

Answer 2

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

Answer 3

Вы можете использовать метод nextAll() и использовать селектор :eq(n) (или метод eq()) для его выбора.

Вы можете написать nextTimes() метод самостоятельно, вот так;

jQuery.fn.nextTimes = function (n) {
    return this.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 должны быть быстрее, если вы делаете это много, и если вы делаете это много, вам все равно понадобится собственный метод плагина .. .)