javascript - 与使用 repeat() 的网格中的行交互

标签 javascript jquery css css-grid

我有一个网格,我目前使用以下 CSS 生成它:

.tp-grid {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-gap: 15px;
align-items: center;
}

在 HTML 中,我生成了类似于以下示例的内容:

<div class="tp-grid">
    <div>Alex</div>
    <div>19</div>
    <div>Male</div>
    <div>Programmer</div>
    <div>Honda Civic</div>
    <div>American</div>
    <div>Brown Hair</div>
    <div>Blue Eyes</div>
    <div>$50k/yr</div>
    <div>Married</div>
    <div>3 kids</div>
</div>

多亏了 CSS,所有这些信息都显示在一个网格行中。但是,如果我想要两行,HTML 可能看起来像这样:

<div class="tp-grid">
    <div>Alex</div>
    <div>19</div>
    <div>Male</div>
    <div>Programmer</div>
    <div>Honda Civic</div>
    <div>American</div>
    <div>Brown Hair</div>
    <div>Blue Eyes</div>
    <div>$50k/yr</div>
    <div>Married</div>
    <div>3 kids</div>
    <div>Ashley</div>
    <div>21</div>
    <div>Female</div>
    <div>DevOps</div>
    <div>Honda Accord</div>
    <div>Swedish</div>
    <div>Blonde Hair</div>
    <div>Gray Eyes</div>
    <div>$55k/yr</div>
    <div>Single</div>
    <div>0 kids</div>
</div>

在 CSS 中使用 repeat() 时是否可以仅将 Action 应用于特定行?现在我想删除一行,以防我的问题太宽泛。

最佳答案

您可以在 css 中使用 :nth-child() 选择器:

div.tp-grid div:nth-child(n+12):nth-child(-n+22){
    display:none;
}

查看此链接以获取有关掌握 :nth-child http://nthmaster.com/ 的更多信息

关于javascript - 与使用 repeat() 的网格中的行交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55031655/

相关文章:

javascript - 如何将 GLSL 着色器代码包含在主 html 的单独文件中?

javascript - flowpayer 无法在 Android 设备上运行。 (需要 Flash 版本 10,1 或更高版本)

javascript - 无法读取空 dropzone 的属性 'removeChild'

jquery - 将 CSS 动画与 JQuery 结合,同时保持其流畅性

javascript - 如何让我随机生成的 div 出现在容器 div 中?

html - 在 zurb foundation 的列中间对齐文本

javascript - 捕获表单 onSubmit 与捕获 Enter 键?

javascript - VueJS v 绑定(bind) :style for background-image: url()

jquery - 使用 AJAX 加载 ExpressionEngine 中的条目

html - 如何让父 div 成为其子项的高度?