Javascript 如何使用jquery查找td的最近邻元素？

我是jquery的新手，我正在开发基于小表的游戏，我必须在表中查找TD周围的相邻元素

例：

1 2 3

4 5 6

7 8 9

---

表中有三行，如果我认为5是我的元素，那么如何找到5个邻居的邻居元素：2、4、6、8、？？/P> < P>我假设你在点击事件中执行，

你可以

4由

5通过

2由

8由

---

但是请记住，如果单击边缘，代码可能返回未定义。

对于垂直邻域，这并不需要太多，但是您需要索引5，即1-假设$This表示包含5的td：

---

我们可以使用诸如next、prev之类的遍历方法和诸如eq和add之类的选择器方法来开发解决方案

var $td = $('table tr:eq(1) td:eq(1)'); //current td = 5

var index = $td.index(), $tr =$td.parent();
var $nbrs = $td.prev().add($td.next()).add($tr.prev().find('td').eq(index)).add($tr.next().find('td').eq(index));
console.log($nbrs.get())

演示：

更详细的方法

var $td = $('table tr:eq(1) td:eq(1)'); //current td = 5

var index = $td.index(), $tr =$td.parent();
var $nbrs = $td.prev(); //find the previous td
$nbrs = $nbrs.add($td.next());//find the next td
$nbrs = $nbrs.add($tr.prev().find('td').eq(index));//find the td with the same index in previous row
$nbrs = $nbrs.add($tr.next().find('td').eq(index));//find the td with the same index in next row

$nbrs.css('color', 'red')
console.log($nbrs.get())

---

为了完整性，无需jQuery：

var row = cell.parentNode;
var table_body = row.parentNode;
var neighbors = [];

if (cell.cellIndex > 0) {
    neighbors.push(rows.cells[cell.cellIndex - 1]);
}

if (row.rowIndex > 0) {
    neighbors.push(table_body.rows[row.rowIndex - 1].cells[cell.cellIndex]);
}

if (cell.cellIndex < rows.cells.length - 1) {
    neighbors.push(rows.cells[cell.cellIndex + 1]);
}

if (row.rowIndex < table_body.rows.length - 1) {
    neighbors.push(table_body.rows[row.rowIndex + 1].cells[cell.cellIndex]);
}

---

兄弟选择器很简单。更具挑战性的是根据索引从同级行中获取元素，但这一点也已经很好地讨论过了。请使用@Pranavc的最近方法，我认为这不会起作用。仅选择最近的第一个最近的。。。。。。对于所有u，可以使用兄弟姐妹+1。比下面的jQuery解决方案要好得多。您在哪里定义行和单元格？非常感谢@Arun P Johny，这正是我想要的。

$(this).closest('tr').next().find('td').eq($(this).index()).text()

var index  = $(this).index(),
    left   = $(this).prev("td").text(),
    right  = $(this).next("td").text(),
    top    = $(this).closest("tr").prev("tr").find("td:eq(" + index + ")").text(),
    bottom = $(this).closest("tr").next("tr").find("td:eq(" + index + ")").text();

var $td = $('table tr:eq(1) td:eq(1)'); //current td = 5

var index = $td.index(), $tr =$td.parent();
var $nbrs = $td.prev().add($td.next()).add($tr.prev().find('td').eq(index)).add($tr.next().find('td').eq(index));
console.log($nbrs.get())

var $td = $('table tr:eq(1) td:eq(1)'); //current td = 5

var index = $td.index(), $tr =$td.parent();
var $nbrs = $td.prev(); //find the previous td
$nbrs = $nbrs.add($td.next());//find the next td
$nbrs = $nbrs.add($tr.prev().find('td').eq(index));//find the td with the same index in previous row
$nbrs = $nbrs.add($tr.next().find('td').eq(index));//find the td with the same index in next row

$nbrs.css('color', 'red')
console.log($nbrs.get())

var row = cell.parentNode;
var table_body = row.parentNode;
var neighbors = [];

if (cell.cellIndex > 0) {
    neighbors.push(rows.cells[cell.cellIndex - 1]);
}

if (row.rowIndex > 0) {
    neighbors.push(table_body.rows[row.rowIndex - 1].cells[cell.cellIndex]);
}

if (cell.cellIndex < rows.cells.length - 1) {
    neighbors.push(rows.cells[cell.cellIndex + 1]);
}

if (row.rowIndex < table_body.rows.length - 1) {
    neighbors.push(table_body.rows[row.rowIndex + 1].cells[cell.cellIndex]);
}