小编Ser*_*han的帖子

假设我有一个 3 列的 CSS 网格。有没有一种方法，使用JavaScript，以获得grid-row和grid-column自动放置元素？

例子：

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>

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

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

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

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

编辑：这不是Retrieve the position (X,Y) of an HTML element的副本，因为我对像素坐标不感兴趣，但对 CSS-Grid 中的行号和列号不感兴趣。

我想根据视口的宽度在轮播视图和不同的布局之间切换。设置轮播效果很好。当我想删除它时遇到了问题。

我$owlTeam.destroy();根据文档使用which 应该在初始化轮播之前重新创建标记的状态，但由于某种原因删除了两个意想不到的关键 div。一个是包装 div，它是包含轮播的 div 的父级，另一个是轮播 div 本身。

这是我的标记：

<section id="some-id" class="team">
  <div class="wrapper"> <!-- this gets removed on destroy -->
    <header><!-- content --></header>
    <div class="owlCarousel"> <!-- and this gets removed on destroy -->
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="small"><!-- content --></article>
      <article class="small"><!-- content --></article>
      <!-- and some more articles -->
    </div>
  </div>
</section>

这是我使用的JS：

var $owlTeam;
if( $window.width() < 680 ) {
    $('.team .owlCarousel').owlCarousel({
        autoPlay: …