如何使用JavaScript获取元素的网格坐标？ [英] How to get the grid coordinates of an element using JavaScript?

问题描述

假设我有一个3列CSS-Grid。是否有办法使用JavaScript获取自动放置元素的网格行和网格列 ？

示例：

  console .log（$（'＃test'）。css（'grid-row'），$（'＃test'）。css（'grid-column'））; 
 //预期输出：2 3 
 //实际输出：两个空字符串
  

< pre class =lang-css prettyprint-override> .grid {
display：grid;
grid-template-columns：repeat（3,1fr）;
}


  < div class =grid> 
< div>< / div> 
< div>< / div> 
< div>< / div> 
< div>< / div> 
< div>< / div> 
< div id =test>< / div> 
< div>< / div> 
< div>< / div> 
< div>< / div> 
< / div> 
  

这是一个示例的JSFiddle： https://jsfiddle.net/w4u87d2f/7/

在这个例子中我可以算出来通过计算元素并知道网格有三列：

  grid-column = $（'＃test'）。index （）％3 + 1; 
 grid-row = Math.ceil（$（'＃test'）。index（）/ 3）
  

但这仅适用于非常简单的网格，也意味着我必须考虑更改列数的断点。

编辑：这不是重复检索HTML元素的位置（X，Y），因为我对像素坐标不感兴趣，但CSS-Grid中的行和列号不感兴趣。

解决方案

  //为div的任何子div添加click事件= grid 
 $（document）.ready（function（）{
 $（'。grid'）。on（'点击'，'div'，函数（e）{
 GetGridElementsPosition（$（this）.index（））; //传入点击的div的索引
 //与其兄弟姐妹相关，in换句话说，如果这是div = grid 
}）中的第5个div; 
}）; 
 
函数GetGridElementsPosition（index）{
 //从类网格的css中获取css属性grid-template-columns 
 //在空格上拆分并得到长度，这个会给你多少列
 const colCount = $（'。grid'）。css（'grid-template-columns'）。split（''）。length; 
 
 const rowPosition = Math.floor（index / colCount）; 
 const colPosition = index％colCount; 
 
 //返回一个包含属性行和列的对象
 return {row：rowPosition，column：colPosition}; 
} 
  

Let's say I have a 3-column CSS-Grid. Is there a way, using JavaScript, to get the grid-row and grid-column of an auto-placed element?

Example:

console.log($('#test').css('grid-row'), $('#test').css('grid-column'));
// expected output: 2 3 
// actual output: two empty strings

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

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="test"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Here is a JSFiddle of the example: https://jsfiddle.net/w4u87d2f/7/

In this example I could figure it out by counting the elements and knowing the grid has three columns:

grid-column = $('#test').index() % 3 + 1;
grid-row = Math.ceil( $('#test').index() / 3 )

But that only works for very simple grids and also means I have to consider breakpoints that change the number of columns.

Edit: This is not a duplicate of Retrieve the position (X,Y) of an HTML element, as I'm not interested in pixel coordinates but the row and column number within the CSS-Grid.

解决方案

//Add click event for any child div of div = grid
$(document).ready(function(){
    $('.grid').on('click', 'div', function(e){
          GetGridElementsPosition($(this).index()); //Pass in the index of the clicked div
    //Relevant to its siblings, in other words if this is the 5th div in the div = grid
    });
});

function GetGridElementsPosition(index){
    //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 rowPosition = Math.floor(index / colCount);
    const colPosition = index % colCount;

    //Return an object with properties row and column
    return { row: rowPosition, column: colPosition } ;
}

这篇关于如何使用JavaScript获取元素的网格坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！