如何定位動態條目的網格行中的第一個和最後一個項目？

Question

下面是我使用的工具：

• Vuejs
• jQuery的Packery有磚石佈局

我建立一個頁面，從JSON需要的內容並填充柱，產品和網頁一個循環中的頁面。循環中的每個對象都按照日期排序，並且在用戶在後端創建新帖子，產品或頁面後，會將其添加到頁面中。

當點擊一個產品時，它會打開它的容器旁邊的產品信息和內容框。由於交互的性質，我需要確保我只針對位於行左側和右側的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> 

任何人都可以看到如何可以做到這一點？

我已經看過第n個孩子，第n個類型，但他們不工作，因爲內容是動態的，所以我認爲它可能是通過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>