使用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');