javascript - 计算html元素并除以100

我在页面上有以下简单的导航。

.tab-nav a,
.tab-nav a:visited,
.tab-nav a:focus,
.tab-nav a:hover {
  display: inline-block;
  color: #000;
  text-decoration: none;
  padding: 24px;
  border: 1px solid #dedede;
}

<nav class="tab-nav">
  <a>Item One</a>
  <a>Item Two</a>
  <a>Item Three</a>
  <a>Item Four</a>
  <a>Item Five</a>
</nav>

是否可以计算<a>元素（在这种情况下为5）并除以100？

为了给您一些背景信息，此导航用于WordPress中的内容轮播（Flickity）。每个页面将具有不同数量的导航元素。 Flickity使用绝对定位，因此我需要将<a>元素分开以适合100％的宽度。 Flexbox与Flickity不兼容，这就是为什么我需要遵循绝对定位路线的原因。

在我的示例中，该计算将等于20。然后将使用此计算来应用宽度。例如。 <a style="width: 20%">。

最佳答案

JavaScript具有可用于计算出现次数的功能。
然后，您可以将它们除以100。

document.getElementsByTagName("a").length / 100;

对于PHP方法，您可以使用substr_count();

<?php

$html = '
<nav class="tab-nav">
  <a>Item One</a>
  <a>Item Two</a>
  <a>Item Three</a>
  <a>Item Four</a>
  <a>Item Five</a>
</nav>
';

echo $count = substr_count($html, "<a>") / 100;