I went through many answers to find how to count number of child elements in Angular JS but I didn't understood. Please have a look at my simple code and suggest me super simple method of counting no of childs.
I want count the total child under <div id="myDiv"> and total span elements under <div id="myDiv">.
Here total no of child = 5 and total span elements = 3
<html>
<body ng-app="myApp" ng-controller="myCtrl">
<script src=".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>
I went through many answers to find how to count number of child elements in Angular JS but I didn't understood. Please have a look at my simple code and suggest me super simple method of counting no of childs.
I want count the total child under <div id="myDiv"> and total span elements under <div id="myDiv">.
Here total no of child = 5 and total span elements = 3
<html>
<body ng-app="myApp" ng-controller="myCtrl">
<script src="https://ajax.googleapis./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>
3 Answers
Reset to default 6You can make use of querySelectorAll and get length on it
check the following snippet
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./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>Hope it helps
Your HTML like this...
<div class="row">
<div class="cols">col 1</div>
<div class="cols">col 2</div>
<div class="cols">col 3</div>
</div>
<div class="row">
<div class="cols">col 1</div>
<div class="cols">col 2</div>
</div>
You can use the below script :
angular.forEach(document.querySelectorAll('.row'), function(val, key){
angular.element(val).removeClass('row');
angular.element(val).addClass('row'+angular.element(val).children().length);
});
I know this is a really old post, but this also works
var childNum = document.querySelector('#myDiv').childElementCount;
This also saves a DOM query