Как получить количество, используя JavaScript для ниже HTML?

Question

Я пытаюсь получить количество элементов списка в неупорядоченном списке, который находится в dir-pagination-controls.how, чтобы получить количество элементов списка, используя 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

Используя vanilla javascript, вы можете использовать querySelectorAll, который возвращает NodeList, который затем вы можете получить length . Для вашего случая селектор типа ul.pagination>li должен работать

Answer 2

Как отмечено [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>

Answer 3

В javascript все html-элементы имеют свойство childElementsCount.
Если у вас есть только теги li в теге ul, вы можете просто использовать эту строку кода:
let listElements = document.querySelector("ul").childElementsCount;

Если у вас есть другие теги в теге ul, вы должны получить все дочерние элементы и просмотреть их. Если имя ребенка li, вы можете добавить 1 к счету.

Answer 4

Вы можете сделать что-то простое:

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