Javascript 选择所有周围的元素

Question

仅使用 JavaScript 可以实现这一点吗？

基本上我有 25 个 div ，其中有一个 .cell 类，并且最中心的 div 包含文本:“O”

我想循环遍历所有单元格，并更改立即包围单元格的背景颜色，innerHTML 为“O”

我知道我可以检查 previousSibling 和 nextSibling

for (var i = 0;i < 25; i++) {
    if (cell[i].innerHTML == "O") {
        cell[i].previousSibling.style.backgroundColor = "#000"
        cell[i].nextSibling.style.backgroundColor = "#000"
    }
}

我的问题:我将如何选择上面的 sibling 、下面的 sibling 和/或对 Angular sibling ？

这是我的 fiddle http://jsfiddle.net/xamte3fa/2/

Answer 1

如果您知道矩阵是 5x5，您似乎从创建它的代码和 CSS 宽度规则中知道了这一点，那么您可以根据知道矩阵的大小来计算周围单元格的索引。

例如，紧邻上方的单元格将是其中包含“O”的单元格的索引减去宽度 5。

var cellAbove = index - 5;
var cellLeft = index - 1;
var cellRight = index + 1;
var cellBelow = index + 5;

当然，您必须对所有这些进行边界检查，以防带有“O”的单元格位于边缘。

下面是一个代码示例，它使用您知道它是 5x5 矩阵的概念来突出显示上面、下面、左侧和右侧的单元格:

function highlightSurrounding() {
    var cells = document.querySelectorAll(".cell");
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].innerHTML === "O") {
            // found a target
            var results = calcNeighbors(i, 5, 5);
            var bordered = results.bordered;
            var diagonals = results.diagonals;
            for (var dir in bordered) {
                if (bordered[dir] !== null) {
                    cells[bordered[dir]].style.backgroundColor = "#F00";
                }
            }
            for (var dir in diagonals) {
                if (diagonals[dir] !== null) {
                    cells[diagonals[dir]].style.backgroundColor = "#0F0";
                }
            }

        }
    }
}

// this is where the neighbor indexes are calculated
// and bounds-checked
// returns an object with two objects in it where each
// object has an index number for each direction or null if that neighbor
// doesn't exist
function calcNeighbors(index, matrixWidth, matrixHeight) {
    var bordered = {};
    bordered.above = index >= matrixWidth ? index - matrixWidth : null;
    bordered.below = index + matrixWidth < matrixWidth * matrixHeight ? index + matrixWidth : null;
    bordered.left = index % matrixWidth !== 0 ? index - 1 : null;
    bordered.right = (index + 1) % matrixWidth !== 0 ? index + 1 : null;

    // now calc diagonals
    var diagonals = {upLeft: null, upRight: null, belowLeft: null, belowRight: null};
    if (bordered.left !== null && bordered.above !== null) {
        diagonals.upLeft = bordered.above - 1;
    }
    if (bordered.left !== null && bordered.below !== null) {
        diagonals.belowLeft = bordered.below - 1;
    }
    if (bordered.right !== null && bordered.above !== null) {
        diagonals.upRight = bordered.above + 1;
    }
    if (bordered.right !== null && bordered.below !== null) {
        diagonals.belowRight = bordered.below + 1;
    }


    return {bordered: bordered, diagonals: diagonals};
}

highlightSurrounding();

工作演示:http://jsfiddle.net/jfriend00/zmkq9ejo/

<小时/>

仅供引用，如果您想纯粹根据屏幕上的布局位置来执行此操作，则必须计算每个单元格的坐标范围，然后查找占据您感兴趣方向的位置的单元格。在我的意见，这比仅仅依靠您知道它是一个矩阵并让数学计算哪个单元格数量将是给定方向这一事实要困难得多。