gpt4 book ai didi

javascript - 计算 AngularJS 中子元素的数量

转载 作者:搜寻专家 更新时间:2023-10-31 22:39:22 25 4
gpt4 key购买 nike

我查看了很多答案以找到如何计算 Angular JS 中子元素的数量但我不明白。请看看我的简单代码,并向我推荐计算 child 数量的 super 简单方法。

我想统计 <div id="myDiv"> 下的 child 总数总计span <div id="myDiv"> 下的元素.

这里总计no of child = 5总计span elements = 3

<html>
<body ng-app="myApp" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<button ng-click="countElem()">Count</button>
<div id="myDiv">
<span>child 1</span>
<span>child 2</span>
<span>child 3</span>
<p>child 4</p>
<p>child 5</p>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){

});
</script>
</body>
</html>

最佳答案

您可以使用 querySelectorAll 并获取其长度

检查下面的片段

 var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.countElem = function() {
var div = document.querySelector('#myDiv');
var spanCount = div.querySelectorAll('span').length;
var pCount = div.querySelectorAll('p').length;
console.log("spanCount" + spanCount);

console.log("pCount" + pCount);
}
});
<html>

<body ng-app="myApp" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<button ng-click="countElem()">Count</button>
<div id="myDiv">
<span>child 1</span>
<span>child 2</span>
<span>child 3</span>
<p>child 4</p>
<p>child 5</p>
</div>

<script>
</script>
</body>

</html>

希望对你有帮助

关于javascript - 计算 AngularJS 中子元素的数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41135604/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com