Question

我经历了许多答案，以找出如何计算Angular JS中的子元素数量，但我不明白。请查看我的简单代码，并建议我使用超级简单计算没有孩子的方法。

我想要计算<div id="myDiv">下的总孩子数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>

Answer 1

您可以使用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>

希望有所帮助

Answer 2

list = [1,2,3,4]

您可以使用以下脚本：

 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>

Answer 3

我知道这是一个非常老的帖子，但这也有用

var childNum = document.querySelector('#myDiv').childElementCount;

这还会保存DOM查询

计算AngularJS中子元素的数量

3 个答案: