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

Question

The grids div sample.

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

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.

Answer 1

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

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

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