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

Question

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

3

我正在尝试编写一个jQuery选择器来选择一系列的表格单元格 (minRow, minCol) 到 (maxRow, maxCol)。

我有一个可以选择水平范围 (col 1, row 2) 至 (col 3, row 2) 的选择器：
$('tr:lt(3):gt(1) td:lt(4):gt(0)') 但是对应的垂直范围 (col 2, row 1) 到 (col 2, row 3) 则无法正常工作：
$('tr:lt(4):gt(0) td:lt(3):gt(1)')
因为 td 选择器不会循环遍历行，它只会选择第一个。

使用 map 和 each 函数的版本可行：

$('tr:lt(4):gt(0)').map( function() { return $(this).find('td:lt(3):gt(1)') } ).each( function() { /* this.do_something */ } );

但是这种方法更加丑陋。

是否有更优雅的方式来实现这个目标呢？

如果能找到比 :lt():gt() 更优雅的范围选择器就更好了。

以上水平和垂直范围以及区块范围的示例可在此 jsfiddle 中查看：http://jsfiddle.net/jghaines/qeLhgw4f/4/。

- Jason

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

选择器tr:lt(3):gt(1) td:lt(4):gt(0)之所以有效，是因为只选择了单个行。发生的情况是tr:lt(3):gt(1)将返回第三行中的一组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');

更新示例

既然你想要一个替代组合: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');