有没有办法使用 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>