如何定位动态条目网格行中的第一项和最后一项？

Question

以下是我正在使用的工具：

• Vuejs
• 具有砖石布局的 Jquery Packery

我正在构建一个页面，该页面从 json 获取内容并在一个循环中使用帖子、产品和页面填充主页。循环中的每个对象都使用 lodash 按日期排序，并在用户在后端创建新帖子、产品或页面后添加到页面中。

当点击一个产品时，它会打开信息和一个包含产品信息的容器旁边的内容框。由于交互的性质，我需要确保我只针对行最左侧和最右侧的 div。我正在使用 Vue JS 来呈现组件中的内容。下面是我正在使用的说明：

正如您在此处看到的，我只希望能够将 css 定位在中间列最左侧或最右侧的任何项目上。问题是内容是动态的，并且从左到右流动。

这是我正在使用的标记/html：

<div id="start-grid">

      <div class="grid__item grid_item-home large--one-third medium--one-whole no-padding" v-for="(key, index) in productsOrderBy" :class="{ influence: productsOrderBy[index].influence === true, about: productsOrderBy[index].about === true, product_item: productsOrderBy[index].vendor}">

        <div v-if="productsOrderBy[index].vendor" class="shop-item">

          <router-link v-bind:data-id="productsOrderBy[index].id" :to="'/products/'+ index" active-class="active" class="product grow">
            <div class="inner-container relative">
              <div class="pad-normal absolute top-0 left-0 z-2 large--one-whole product-color product-info">
                <p class="univers uppercase smaller body-size">
                  Shop
                 </p>
                <p class="lyon-text">{{productsOrderBy[index].title}}</p>
                <p class="univers uppercase smaller body-size buy">
                  Buy now
                 </p>
              </div>
              <div @click="setActive($event)" v-bind:data-id="productsOrderBy[index].id" class="z-1 relative gallery grow" v-bind:id="productsOrderBy[index].id">
                <img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].images[0].src" v-bind:alt="productsOrderBy[index].images[0].id">
              </div>

            </div> 
            <transition 
                  v-if="$route.params.id == index"
                  appear
                  name="slide-fade">
                  <div class="absolute z-3 top-0 grid__item large--one-whole card">
                    <router-view :key="$route.params.id"></router-view>
                    </div>
                </transition>     
          </router-link>

        </div>

        <div v-else-if="productsOrderBy[index].about" :style="{ 'background-color': '+productsOrderBy[index].tags+' }" class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">

            <div @click="playVideo($event)" class="pad-normal z-1 large--one-whole">
                <p class="univers uppercase smaller body-size">
                  {{ productsOrderBy[index].title }}
                </p>
                <p class="lyon-text" v-html="productsOrderBy[index].content.html">
                  {{ productsOrderBy[index].content.html }}
                </p>
            </div>

        </div>

        <div v-else class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">

              <div class="pad-normal z-1 large--one-whole">
                  <p class="univers uppercase smaller body-size">
                    Influence
                  </p>
                  <p class="lyon-text">
                    {{ productsOrderBy[index].title }}
                  </p>
              </div>

              <img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].media.image">

        </div>

    </div>

  </div>

谁能看到这是如何实现的？

我查看了 nth-child、nth-of-type 但它们不起作用，因为内容是动态的，所以我认为它可能可以通过 Javascript 而不是通过计数项目来实现。

Answer 1

您能否稍微扩展一下动态的含义？因为您当然可以使用nth-child 像在我的sn-p 中那样根据您的图像进行选择。

$(function(){
 $('button').click(function(){
  $('.wrap').append('<div class="grid-col"></div>');
 });
});

.grid-col {
  height: 200px;
  width: 32.26%;
  margin: 1% 0 1% 1.6%;
  background: #ccc;
  float: left;
}
.grid-col:nth-child(3n+1){
 margin-left: 0;
 background-color: red;
}
.grid-col:nth-child(3n){
 background-color: red;
}
.wrap {
  width: 80%;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Add Column</button>
<div class="wrap">
  <div class="grid-col blog"></div>
  <div class="grid-col page"></div>
  <div class="grid-col blog"></div>
  <div class="grid-col product"></div>
  <div class="grid-col blog"></div>
  <div class="grid-col page"></div>
  <div class="grid-col blog"></div>
  <div class="grid-col product"></div>
  <div class="grid-col blog"></div>
</div>