CSS 第 nth-child 不适用于动态隐藏的元素 [AngularJS]

Question

我正在尝试对每个元素实施 CSS nth-child。 如果达到一定数量我想隐藏第一个元素并在数量再次减少时让它重新出现

问题是 nth-child 仍然以某种方式计算 隐藏元素 ，因此错误地实现了样式。这是一个错误还是我做错了？

注意：如果我使用 jQuery

也会发生同样的事情

视图：

<div ng-app>
    <div ng-controller="TheCtrl">

        <p>Amount to add: <input type="text" ng-model="amount" ng-init="amount=1"></p>

        <div class='holder'>
            <div ng-class='elements.length < 6 ? "inside" : ""'
                 ng-hide="elements.length >= 6">
                <button class='button' ng-click="add(amount)">Add more</button>
            </div>
            <div class='inside' ng-repeat="(k,v) in elements">
                {{ $index }} <a href="" ng-click="remove($index)">Remove</a>
            </div>
        </div>

    </div>
</div>

JS(AngularJS):

function TheCtrl($scope) {

    $scope.elements = [{id:1},{id:2}]

    $scope.add = function(amount) {
        for (i=0; i < amount; i++){
            $scope.elements.push({id:$scope.elements.length+1});
        }
    };

    $scope.remove = function(index) {
        $scope.elements.splice(index, 1);
    };

}

CSS:

.holder {
    width: 300px;
    height: 400px;
    border: 1px solid black;
}
.inside {
    height: 30px;
    border: 1px solid black;
}
.inside:nth-child(3n+1) {
    background-color: yellow;
}
.inside a {
    float: right;
}

Answer 1

这是因为隐藏元素仍在 DOM 中。所以它被算作 child 并相应地应用样式。

您可以尝试使用 ng-if 而不是 ng-hide。它将使 div 从 DOM 中消失并且样式将正常工作。

Example

CSS 第 nth-child 不适用于动态隐藏的元素 [AngularJS]

CSS nth-child doesn't work on dynamically hidden element [AngularJS]

javascript

dom

dynamic

css-selectors

angularjs