我有;
<div class="exampleDiv">
<element1></element1>
<element2></element2>
<element3></element3>
</div>
然后一些 CSS 使用 last:child 选择器(仅 margin-right:0 FYI)。但是,我在元素 1-3 上使用了条件 ng-hide,因此如果隐藏了 element3,则 last:child CSS 不会移动到 element2,因为从技术上讲,它是在 DOM 中呈现然后隐藏的。
所以我想知道是否有一种方法可以使用 ng-hide 并拥有类似“最后可见元素”选择器的东西。这样当 ng-hide 工作时,用户可以看到的最后一个元素应用了这个 CSS 吗?
提前感谢您的帮助!
最佳答案
是remove()你在寻找什么,因为它确实从 dom 树中删除了元素:
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.removeElement = function() {
var elmn = angular.element( document.querySelector( '.test :last-child' ) );
elmn.remove();
};
});
.test {
display: flex;
justify-content: space-between;
}
.test div {
border: solid;
min-width: 5em;
}
.test :last-child {
color: red;
}
.test :last-child:before {
content:"actual last-child ";
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<p>each time you click, last element is removed</p>
<div ng-controller="myController" class="test">
<input type="button" value="Remove Div " ng-click="removeElement()">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>last-child</div>
</div>
</div>
关于html - ng-hide 和 last :child CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43756579/