如何让一个元素识别/识别它周围的其他元素？

Question

我一直在使用 JS/jQuery 构建基于《最终幻想 IX》中的 Tetra Master 的游戏，但遇到了一个问题，即如何让卡片 (div) 识别周围的任何其他卡片并获取它们的 ID。

这是布局：https://codepen.io/ElecRei/pen/MEXZpd

HTML：

<div id="card_mat"></div>

    <br>

    <button id="submit" type="button" disabled>End Turn</button>

    <br><br>

JS/jQuery（板上生成卡片的部分）：

var cardMat = document.getElementById("card_mat");

for(i=1; i <= 16; i++){

    $(cardMat).append("<div class='panel' id='" + i + "'><span></span></div>");
    console.log("Panel " + i + " created.");

}

因此，卡片被布置成 4x4 网格，但目前它们基本上只是连续的卡片。我想做的是，如果一张牌放在对手的牌旁边，你的牌即使在代码中不在旁边，也能识别出来。

对于Example，如果我在第一个插槽中放置了一张卡，它可以在它的右侧、右下角和底部为我提供卡的 ID。所以有什么方法可以做到这一点，或者是JS/jQuery 无法做到这一点？

Answer 1

为了更动态的解决方案（其中数组可以是NxN而不是固定的4x4），我建议你使用x、y来识别每个元素并实现查找相邻元素的逻辑。这里有一些建议：

• Get adjacent elements in a two-dimensional array?

静态解决方案是使用数组siblings_of 来获取您想要的信息。这意味着siblings_of[ id ] 将返回所有相邻图块的 ID 列表。

示例如下（运行 sn-p 并单击图块以查看发生了什么）：

var siblings_of = [];

siblings_of[1] = [2, 5, 6];
siblings_of[2] = [1, 3, 5, 6, 7];
siblings_of[3] = [2, 4, 6, 7, 8];
siblings_of[4] = [3, 7, 8];

siblings_of[5] = [1, 2, 6, 9, 10];
siblings_of[6] = [1, 2, 3, 5, 7, 9, 10, 11];
siblings_of[7] = [2, 3, 4, 6, 8, 10, 11, 12];
siblings_of[8] = [3, 4, 7, 11, 12];

siblings_of[9] = [5, 6, 10, 13, 14];
siblings_of[10] = [5, 6, 7, 9, 11, 13, 14, 15];
siblings_of[11] = [6, 7, 8, 10, 12, 14, 15, 16];
siblings_of[12] = [7, 8, 11, 15, 16];

siblings_of[13] = [9, 10, 14];
siblings_of[14] = [9, 10, 11, 13, 15];
siblings_of[15] = [10, 11, 12, 14, 16];
siblings_of[16] = [11, 12, 15];

function mark_siblings(id) {
  siblings_of[id].forEach(function(item) {
    $('#' + item).addClass('marked');
  });
}

function reset() {
  $('.selected').removeClass('selected');
  $('.marked').removeClass('marked');
}


$(document).ready(function() {
  $('.panel').on('click', function() {
    var id = $(this).attr('id');
    reset();
    $(this).addClass('selected');
    mark_siblings(id);
  })
});

.card_mat {
  width: 220px;
}

.panel {
  display: inline-block;
  border: 1px solid #cccccc;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.marked {
  background-color: #dddddd;
}

.selected {
 background-color: #aaaaaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card_mat">
  <div class="panel" id="1">1</div>
  <div class="panel" id="2">2</div>
  <div class="panel" id="3">3</div>
  <div class="panel" id="4">4</div>
  <div class="panel" id="5">5</div>
  <div class="panel" id="6">6</div>
  <div class="panel" id="7">7</div>
  <div class="panel" id="8">8</div>
  <div class="panel" id="9">9</div>
  <div class="panel" id="10">10</div>
  <div class="panel" id="11">11</div>
  <div class="panel" id="12">12</div>
  <div class="panel" id="13">13</div>
  <div class="panel" id="14">14</div>
  <div class="panel" id="15">15</div>
  <div class="panel" id="16">16</div>
</div>

Answer 2

使用 jQuerys .siblings();

如果您将卡片放在 4x4 网格中，语法如下：

<div id="grid">
    <div id="card1"></div>
    <div id="card2"></div>
    <div id="card3"></div>
    <div id="card4"></div>
    ....
</div>

您可以使用.siblings() 查看 DOM 元素周围的兄弟姐妹。

例如，

$("#card2").siblings().css( "background-color", "red" );

将card1、card3、card4、cardn... 背景颜色更改为红色。

编辑

您需要创建一个函数来执行此操作。它不能只使用一种 jQuery 方法来完成。 （也许可以）

我创建了一个函数来仅查找顶行的兄弟姐妹。其他行的过程类似。

我创建了一个Plunk 来展示它。

观察Console.log() 消息。

您可以了解更多关于.eq()here的信息。

还可以了解更多关于.siblings()here的信息。