Question

我正在尝试获取dir-pagination-controls中无序列表中列表项的计数。如何使用javascript获取列表项的计数？

<dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate-scope"
                         pagination-id="openRabPagination"><!-- ngIf: 1 < pages.length -->
  <ul class="pagination ng-scope" ng-if="1 < pages.length"><!-- ngIf: boundaryLinks -->
    <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }" class="ng-scope disabled"><a href=""
                                                                                                             ng-click="setCurrent(1)">«</a>
    </li><!-- end ngIf: boundaryLinks --><!-- ngIf: directionLinks -->
    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }" class="ng-scope disabled"><a href=""
                                                                                                              ng-click="setCurrent(pagination.current - 1)">‹</a>
    </li><!-- end ngIf: directionLinks --><!-- ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }"
        class="ng-scope active"><a href="" ng-click="setCurrent(pageNumber)" class="ng-binding">1</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" class="ng-scope"><a
      href="" ng-click="setCurrent(pageNumber)" class="ng-binding">2</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" class="ng-scope"><a
      href="" ng-click="setCurrent(pageNumber)" class="ng-binding">3</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" class="ng-scope"><a
      href="" ng-click="setCurrent(pageNumber)" class="ng-binding">4</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index --><!-- ngIf: directionLinks -->
    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }" class="ng-scope"><a
      href="" ng-click="setCurrent(pagination.current + 1)">›</a></li><!-- end ngIf: directionLinks -->
    <!-- ngIf: boundaryLinks -->
    <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }" class="ng-scope"><a
      href="" ng-click="setCurrent(pagination.last)">»</a></li><!-- end ngIf: boundaryLinks --></ul>
  <!-- end ngIf: 1 < pages.length -->
</dir-pagination-controls>

Answer 1

使用香草javascript，您可以使用querySelectorAll来返回NodeList，然后可以获取length。对于您的情况，选择器ul.pagination>li应该有效

Answer 2

您可以做一些简单的事情：

document.getElementsByClassName("pagination ng-scope")[0].childElementCount

Answer 3

在javascript中，所有html元素都具有childElementsCount属性。
如果li标记中仅包含ul标记，则只需使用以下代码即可：
let listElements = document.querySelector("ul").childElementsCount;

如果ul标记中还有其他标记，则必须获取所有子代并遍历它们。如果孩子的名字是li，则可以在计数中加1。

Answer 4

被标记为[jquery]

$("ul.pagination>li").length

console.log($("ul.pagination>li").length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate-scope"
                         pagination-id="openRabPagination"><!-- ngIf: 1 < pages.length -->
  <ul class="pagination ng-scope" ng-if="1 < pages.length"><!-- ngIf: boundaryLinks -->
    <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }" class="ng-scope disabled"><a href=""
                                                                                                             ng-click="setCurrent(1)">«</a>
    </li><!-- end ngIf: boundaryLinks --><!-- ngIf: directionLinks -->
    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }" class="ng-scope disabled"><a href=""
                                                                                                              ng-click="setCurrent(pagination.current - 1)">‹</a>
    </li><!-- end ngIf: directionLinks --><!-- ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }"
        class="ng-scope active"><a href="" ng-click="setCurrent(pageNumber)" class="ng-binding">1</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" class="ng-scope"><a
      href="" ng-click="setCurrent(pageNumber)" class="ng-binding">2</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" class="ng-scope"><a
      href="" ng-click="setCurrent(pageNumber)" class="ng-binding">3</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index -->
    <li ng-repeat="pageNumber in pages track by $index"
        ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" class="ng-scope"><a
      href="" ng-click="setCurrent(pageNumber)" class="ng-binding">4</a></li>
    <!-- end ngRepeat: pageNumber in pages track by $index --><!-- ngIf: directionLinks -->
    <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }" class="ng-scope"><a
      href="" ng-click="setCurrent(pagination.current + 1)">›</a></li><!-- end ngIf: directionLinks -->
    <!-- ngIf: boundaryLinks -->
    <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }" class="ng-scope"><a
      href="" ng-click="setCurrent(pagination.last)">»</a></li><!-- end ngIf: boundaryLinks --></ul>
  <!-- end ngIf: 1 < pages.length -->
</dir-pagination-controls>

如何使用html以下的javascript获取计数？

4 个答案: