有没有办法使用javascript检测元素在哪个CSS网格列和行？

Question

有没有办法在 javascript 中动态检测 CSS 网格中元素所在的网格列和行？

我有一个网格，我设置了三个断点，使其具有 4、3 或 2 列。

我想要做的是，如果用户在一个单元格中单击，动态覆盖单元格中的一个新元素，紧邻被单击的单元格的右侧，除非它位于最右边的列中，在这种情况下覆盖元素将进入左侧的单元格。

我知道我可以使用grid-column 和grid-row 来指定要放入新事物的单元格，但是为了能够使用它，我需要知道该单元格的列和行被点击了。

如何动态确定？

Answer 1

这里。将其绑定到单击，但您可以以任何您喜欢的方式访问此功能。单击块以查看它是否是最后一列。该函数接受当前的grid-template-columns，因此它可以在任何断点上工作。

//Add click event for any child div of div = grid
$(document).ready(function() {
  $('.grid').on('click', 'div', function(e) {  
    GetGridElementsPosition($(this).index(), $(this)); //Pass in the index of the clicked div
  });
});

function GetGridElementsPosition(index, element) {

  //Get the css attribute grid-template-columns from the css of class grid
  //split on whitespace and get the length, this will give you how many columns
  const colCount = $('.grid').css('grid-template-columns').split(' ').length;
  const colPosition = index % colCount;
  const rowPosition = Math.floor(index / colCount);
  
  /* determine if it is a last column */
  if (colPosition==(colCount-1)) {
    $(element).html('row:'+rowPosition+'. col:'+colPosition+'. Last column');
  } else {
    $(element).html('row:'+rowPosition+'. col:'+colPosition+'. Not last column');
  }

}

.grid {
  display: grid;
  grid-template-columns: repeat( 3, 1fr );
  grid-row-gap: 1em;
  grid-column-gap: 1em;
}

.grid div {
  height: 2em;
  background: blue;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>