Javascript select 所有周边元素

Question

仅使用 JavaScript 是否可行？

基本上我有 25 divs 和 class .cell 并且最中心的 div 包含文本："O"

我想遍历所有单元格并更改任何单元格的背景颜色立即包围单元格 innerHTML of "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"
    }
}

我的问题：我将如何选择上面的兄弟姐妹，下面的兄弟姐妹 and/or 对角兄弟姐妹？

这是我的 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/

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

Answer 2

你最好把你的需求抽象成一个矩阵模型。正如上面回答者所说，计算目标div的索引；

然后就可以得到一个目标索引数组；

那么如果搭配jquery，就可以简单的满足你的需求了

var indexes = [2,3,4...]; //the result indexes
var cells = $('.cell');
$.each(indexes, function(i, index) {
    cells.eq(index).css(...); //your styling code here
});

如果你坚持不使用jquery，稍微修改一下上面的代码就可以了。

Javascript select 所有周边元素

Javascript select all surrounding elements

javascript

html

dom

traversal

dom-traversal