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

Posted 2023-02-22

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

【英文标题】：How can I target first and last item in a grid row of dynamic entries?

【发布时间】：2017-08-09 00:00:11

【问题描述】：

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

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:>
              </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 而不是通过计数项目来实现。

【问题讨论】：

我需要 HTML 结构来解决这个问题。你可以使用 selector:last-child, selector:first-child

刚刚编辑给你看

我需要输出 HTML..

【参考方案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>

【讨论】：

动态我的意思是有些项目不需要点击它们，它们只是图像。它是具有 .product 类的项目，它们随时出现。

因此，如果您的意思是网格结构应该保持不变，那么 nth-child 应该仍然选择正确的 div。我更新了我的 sn-p 以添加动态列，您可以看到正确的 div 变红了。

但是它们定义了一个名为 .product 的类，它们只能出现在列表中的第 4、6、11 或 15 位。其余的可能有一个名为 .blog 或 .page 的类，它会根据用户在后端的编辑或更改而更改

抱歉，但我想我还是很困惑。将 div 插入到我的 sn-p 上的 wrap 元素的位置无关紧要。 CSS 将始终选择正确的 div。如果问题出在不同的类上，请使用 nth-child 选择器创建一个新类，父元素内的所有 div 都可以共享。

好的，我明白你在说什么，但问题是当我执行上述操作并且客户端插入另一个产品时，网格会重新调整并且第 n 个孩子被忽略，因为它不正确并且不适用于需要定位的 .product 项。包装厂也重置订单