代码之家 › 专栏 › 技术社区 › S. TarÄ±k Çetin

如何获取单元格的实际网格行值?

css jquery

S. TarÄ±k Çetin · 技术社区 · 7 年前

cell 是的jQuery对象 div 在CSS中 grid 布局

这: cell.css("grid-row")

返回以下内容: auto / auto

如何获取 ?

小提琴: https://jsfiddle.net/9gepnLhk/2/

当您打开控制台时,您可以看到如下输出: 自动/自动 . 我想要 1 / span 1 或 1 / 2 等等,这样我就可以得到第一个字符,在这种情况下, 1 .

4 回复 | 直到 7 年前

UÄur Oruc 7 年前

我为你找到了一个动态的解决方案。希望能有帮助

$(function(){
    var rowSize =$(".cell").first().css("grid-row").split('/').length
  $(".cell").each((c,elem)=>{
    elem.innerText= Math.ceil(++c / rowSize)
  })
})

不停摆弄 https://jsfiddle.net/9gepnLhk/7/

Partho63 BASANT KUMAR 7 年前

从JSFIDLE中,我可以看到您没有添加任何 grid-row 所有物这就是你得到默认值的原因 auto / auto . 如果添加网格属性,如 grid-row: 1 / 3; 然后它记录下来 1 / 3 到控制台。

Nafees Anwar 7 年前

你没有添加 grid-row 由您自己将属性转换为单元格。jQuery正在返回默认值。如果你加上 网格行 https://jsfiddle.net/4brvo92g/

S. TarÄ±k Çetin 7 年前

grid-area

$(".cell").each(function (index) {
    $(this).text(index); // for debugging

    var col = index % 2; // 2 is the column count, hardcoded.
    var row = Math.floor(index / 2); // ditto

    $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});
});

我不认为这个答案是可以接受的,因为我认为应该有一个更具活力的方法。

小提琴: https://jsfiddle.net/9gepnLhk/5/