For Loop 没有正确应用 nth-child

Posted 2023-03-06

【中文标题】For Loop 没有正确应用 nth-child

【英文标题】：For Loop is not applying nth-child correctly

【发布时间】：2019-01-08 11:09:53

【问题描述】：

使用 Sass，我循环使用类 animateMe 的项目，并使用索引作为乘数来应用动画延迟。

@for $i from 1 through 100 
  .animateMe:nth-child(#$i) 
    animation-delay: .5s * $i;
  

使用 Angular，我仅在满足 ngClass 的条件时才在 div 上应用 animateMe 类。

<div id="neededfoodnames" *ngFor="let list of lists; let i = index" [ngClass]="'animateMe':lists[i-1]?.category != list.category && animate == true">
.....
</div>

仅当项目的类别与最后一个项目的类别不同且 animate 设置为 true 时才应用该类。

animate: boolean = true;

这会产生 4 个具有 animateMe 类的 div。 但是，动画延迟没有正确应用，因为第一个和第二个 div 的正确延迟分别为 0.5s 和 1s，而第三个 div 的延迟不正确，为 3s。

第三个 div 获取类 animateMe:nth-child(6) 但它应该是 animateMe:nth-child(3)。

我该如何纠正这个问题？我创建了一个StackBlitz for this issue。

【问题讨论】：

所有 CSS 似乎都很好（因为在 sass 循环中正确创建了所有类，因此 :nth-child 可以按预期工作）。你指的是#neededfoodnames:nth-child(4)怎么没有内容？或者你正试图用 ng-animate 覆盖你的 css

另外 PS 你有多个#neededfoodnames 实例：)

@stwilz 我删除了#neededfoodnames。 animateMe 类应该只应用于 4 个 div，因此 animateMe:nth-child(6) 不应该存在，但确实存在。

lists[i-1]?.category 我在这里看到一个错字。三元运算符中问号后的点。

【参考方案1】：

您的lists 数组包含不被视为animateMe 元素的对象。只有少数元素具有animateMe 类。看这个截图：

此屏幕截图解释了为什么 nth-child 选择器无法按预期工作。我看到了两种解决方案。

解决方案 1

最好的解决方案是清理这些元素。理想情况下，您应该在该特定部分中只有 animateMe 元素，如下所示：

<div class="animateMe">...</div>
<div class="animateMe">...</div>
<div class="animateMe">...</div>
<div class="animateMe">...</div>

您应该找到一种显示相同 UI 的方法，但使用较少的 div 元素（例如，使用更多样式或简单地移动 animateMe div 下的元素）。如果由于某种原因无法做到这一点，那么您可以考虑解决方案 #2。

解决方案 2

另一种（但不是那么干净）的解决方案是预处理该数组并存储循环可以使用的order 属性。例如：

lists = [, order:1, , , order:2, , order:3, , ];

然后您可以遍历数组并添加一个data-order 属性，我们可以用CSS 匹配：

<div *ngFor="let list of lists; let i = index" [ngClass]="'animateMe': list.order && animate" [attr.data-order]="animate ? list.order : null">
    ...
</div>

如果您的对象中未定义order 属性，则不会打印data-order 属性。这是一个输出示例：

<div>...</div>
<div class="animateMe" data-order="1">...</div>
<div>...</div>
<div>...</div>
<div class="animateMe" data-order="2">...</div>
<div>...</div>
<div class="animateMe" data-order="3">...</div>
<div>...</div>
<div>...</div>

最后一步是更改您的 SaSS 代码以匹配这些元素：

@for $i from 1 through 100 
    div[data-order="#$i"].animateMe 
        animation-delay: .5s * $i;
    

【讨论】：

在 CSS 中通过元素标签类型来定位元素是不好的做法，您可以从上述 Sass 中删除 div，它仍然可以按预期工作。

@EdmundReed 您能否发布一个指向参考的链接，以确认这是一种不好的做法？考虑到浏览器通常按 nodeName 索引元素，div 应该使选择器更有效，并且根据定义，这是一个很好的做法。

也许从微观上来说它的性能更好，但对于可维护性和可扩展性来说，这是不好的做法。这篇文章似乎解释了为什么frontstuff.io/you-need-to-stop-targeting-tags-in-css。有了这样的东西，可维护性和可扩展性往往比微不足道的性能提升更受青睐。