使用jQuery选择器获取表格单元格的范围

Question

我正在尝试编写一个jQuery选择器来选择一系列表格单元格（minRow，minCol）到（maxRow，maxCol）。

我有用于水平范围（列1，行2）工程（第3栏第2行）
$('tr:lt(3):gt(1) td:lt(4):gt(0))')

选择但这失败对于相应的垂直范围（第2栏第1行）到（第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)将返回第3行中的一组td元素，并且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元素）进行选择的。

解决方法是链接tr:lt(4):gt(0)/td:lt(3):gt(1)之间的.find()方法。

换句话说，替换：

$('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');