Question

cell是在CSS div布局内用于grid的jQuery对象。

此：cell.css("grid-row")

返回此值：auto / auto

如何获取cell的实际数字行值？

打开控制台时，您可以看到输出为auto / auto。我想要1 / span 1或1 / 2等，这样我就可以得到第一个字符，在这种情况下为1。

Answer 1

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

$(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/

Answer 2

从jsfiddle中，我可以看到您尚未添加任何grid-row属性。这就是为什么您获得默认的auto / auto的原因。如果您添加grid-row: 1 / 3;之类的网格属性，则它将1 / 3记录到控制台。

Answer 3

您不是自己将grid-row属性添加到单元格中。 jQuery返回默认值。如果将grid-row添加到单元格，则将获得您的价值。 https://jsfiddle.net/4brvo92g/

Answer 4

我最终使用jQuery对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/

如何获得单元格的实际网格行值？

4 个答案: