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

The grids div sample.

            <div >
               <div >1</div>
               <div >2</div>
               <div >3</div> 
               <div >4</div>
               <div >5</div>
               <div >6</div> 
               <div >7</div>
               <div >8</div>
               <div >9</div> 
               <div >10</div>
            </div>

So if the grid with the 1 is being hovered over, I want to target the one with 2,3,4 and upto 5 at maximum.

If the user is dragging the ships destroyer/submarine, I want to target the current div and the next div.

if ship is cruiser, current div plus next two div. if ship is battleship, current div plus next three div. if ship is carrier, current div plus next four div.

const grids = document.querySelectorAll('.grid');

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

The grids here represent a 10*10 grid in the dom which are just divs. When I hover over certain divs, I want to be able to get the next few divs that comes after the current div. I have tried closest() but that does not work in this particular situation.

What I'm trying to do is to use drag & drop to place ships in my grid. So if the user is dragging the "destroyer" or the "submarine", I want to be able to get the current e.target and the next divs. If the user is dragging the "Carrier", I want to be able to get the current e.target and the next four divs cuz the size of the carrier is 5.

CodePudding user response：

You can use the index and get the next elements in the array

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Or you can use DOM methods

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Used 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);
        //};
    });
});