javascript - For Loop未正确应用nth-child

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

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

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

<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;

这将导致具有animateMe类的4个div。
但是，由于第一个和第二个div分别具有0.5s和1s的正确延迟，而第三个div具有不正确的3s延迟，因此不能正确地应用动画延迟。

第三个div正在获取类animateMe:nth-child(6)，但应为animateMe:nth-child(3)。

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

最佳答案

您的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 divs下简单移动元素）。如果由于某种原因无法实现，则可以考虑解决方案2。

解决方案2

您可以选择的一种替代方法（并非那么干净）是对该数组进行预处理，并存储一个可供循环使用的order属性。例如：

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

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

<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;
    }
}

关于javascript - For Loop未正确应用nth-child，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51623801/