如何找到 e.target 的下一个（或多个）元素？

Question

网格div样本。

            <div class="gameBoard">
               <div class="grid">1</div>
               <div class="grid">2</div>
               <div class="grid">3</div> 
               <div class="grid">4</div>
               <div class="grid">5</div>
               <div class="grid">6</div> 
               <div class="grid">7</div>
               <div class="grid">8</div>
               <div class="grid">9</div> 
               <div class="grid">10</div>
            </div>

因此，如果将鼠标悬停在带有 1 的网格上，我想定位带有 2、3、4 且最多为 5 的网格。

如果用户正在拖动船只 destroyer/submarine，我想定位当前 div 和下一个 div.

如果船是巡洋舰，当前 div 加上接下来的两个 div。如果船是战列舰，则当前 div 加上接下来的三个 div。如果船舶是承运人，则当前 div 加上接下来的四个 div.

常量网格 = document.querySelectorAll('.grid');

grids.forEach(el => {
el.addEventListener('dragenter', (e) => {
      // Find the next few dom elements that comes after e.target
   });
});

这里的网格代表 dom 中的 10*10 网格，也就是 div。当我将鼠标悬停在某些 div 上时，我希望能够获得当前 div 之后的下几个 div。我试过 closest() 但在这种特殊情况下不起作用。

我想做的是使用拖放操作将船只放置在我的网格中。因此，如果用户正在拖动“驱逐舰”或“潜艇”，我希望能够获得当前的 e.target 和下一个 div。如果用户正在拖动“载体”，我希望能够获得当前 e.target 和接下来的四个 div 因为载体的大小是 5.

Answer 1

您可以使用索引并获取数组中的下一个元素

const cells = Array.from(document.querySelectorAll('.cell'));

cells.forEach((el, index) => {
  el.addEventListener('click', (evt) => {
    const nextSiblings = cells.slice(index+1);
    console.log(nextSiblings);
  });
});

.cell {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

<div class="my-grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

或者你可以使用DOM方法

const grid = document.querySelector(".grid");
grid.addEventListener("click", e => {
  let cell = e.target.closest(".cell");
  if (!cell) return;
  const siblings = [];
  while (cell = cell.nextElementSibling) {
    siblings.push(cell);
  }
  console.log(siblings);
});

.cell {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Answer 2

使用了 nextSiblingElement

grids.forEach(el => {
    el.addEventListener('dragenter', (e) => {
        //if (currentShipLength === 2) {
            const one = e.target;
            const two = e.target.nextElementSibling;
            const three = two.nextElementSibling;
            const four = three.nextElementSibling;
            const five = four.nextElementSibling;

            console.log(one, two, three, four, five);
        //};
    });
});

如何找到 e.target 的下一个（或多个）元素？

How can I find the next element (or elements) of my e.target?

html

javascript

css

dom

dom-events