Question

以下是我使用的工具：

Vuejs
Jquery Packery with masonry layout

我正在构建一个从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，n-of-type但它们不起作用，因为内容是动态的，所以我认为通过Javascript可以通过计算项目来实现。

Answer 1

你可以通过动态扩展一下你的意思吗？因为您可以使用我的代码段中的nth-child根据您的图片进行选择。

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

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

1 个答案: