Question

这只能使用JavaScript吗？

基本上我有25 divs有一个班.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"
    }
}

我的问题：我如何在兄弟姐妹和/或对角兄弟姐妹之下选择上述兄弟姐妹？

这是我的小提琴 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选择所有周围的元素

2 个答案: