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中。所以它算作孩子，并相应地应用了样式。

您可以尝试使用ng-if代替ng-hide。这将使div从DOM中消失，样式将正常工作。

Example

CSS nth-child不能处理动态隐藏元素[AngularJS]

1 个答案: