Получение диапазона ячеек таблицы с помощью селекторов jQuery

Question

Я пытаюсь написать селектор jQuery для выбора диапазона ячеек таблицы (minRow, minCol) до (maxRow, maxCol).

У меня есть селектор, который работает для горизонтального диапазона (COL 1, строка 2) до (COL 3, строка 2)
$('tr:lt(3):gt(1) td:lt(4):gt(0))')

Но это не выполняется для соответствующего вертикального диапазона (COL 2, строка 1) к (COL 2, строка 3)
$('tr:lt(4):gt(0) td:lt(3):gt(1)')
, потому что селектор TD не будет цикл по строке, он будет просто сделать первый один

Эта версия, используя карту, и каждый работает
$('tr:lt(4):gt(0)').map(function() { return $(this).find('td:lt(3):gt(1)') }).each(function() { /* this.do_something */ });
, но даже уродливый

Есть ли элегантный способ достичь этого?

Бонусные баллы для нахождения более элегантный селектор диапазона, чем :lt():gt()

Примеры указанных выше горизонтальных и вертикальных диапазонов и диапазон блока находятся на этой скрипке http://jsfiddle.net/jghaines/qeLhgw4f/4/

Answer 1

Селектор tr:lt(3):gt(1) td:lt(4):gt(0) работает только потому, что одна строка выбирается. Что происходит tr:lt(3):gt(1) вернет набор td элементов в строке 3, а td:lt(4):gt(0) выберет второй, третий и четвертый td элементы по их индексу в , что определенный набор.

При использовании селектора, такого как tr:lt(4):gt(0) td:lt(3):gt(1), выбрано несколько строк, а селектор усугубляется относительно возвращаемого набора (а не каждого отдельного элемента td). Селектор tr:lt(4):gt(0) возвращает набор, состоящий из второй, третьей и четвертой строк. На основе этого возвращенного набора селектор td:lt(3):gt(1) выберет третий элемент td по его индексу в , который задает.

Других слов, :gt()/:lt() селекторы будут выбраны все элементы с индексом больше или меньше, чем индекс в пределах согласованного набора. Ваши селекторы работали не так, как ожидалось, потому что элементы выбирались на основе согласованного набора (а не каждого отдельного элемента td).

Решение должно заключаться в цепи .find() между tr:lt(4):gt(0)/td:lt(3):gt(1).

Другими словами, заменить:

$('table#2 tr:lt(4):gt(0) td:lt(3):gt(1)').addClass('red'); 

С:

$('table#2 tr:lt(4):gt(0)').find('td:lt(3):gt(1)').addClass('red'); 

Updated Example

---

Поскольку вы хотели альтернативу комбинируя :lt():gt(), то стоит отметить, что вы можете используйте метод .slice():

Например, вы могли бы заменить:

$('table#2 tr:lt(4):gt(0) td:lt(3):gt(1)').addClass('red'); 

С:

$('table#2 tr').slice(1, 4).find('td:lt(3):gt(1)').addClass('red');