代码之家 › 专栏 › 技术社区 › Sam JvdBerg

计算html元素并除以100

php

0

Sam JvdBerg · 技术社区 · 6 年前

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

.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?

为了给您提供一些上下文,此nav用于内容传送带( Flickity )在WordPress中。每个页面将有不同数量的nav元素。轻快使用绝对定位,所以我需要划分 <a> 100%宽度的元素。Flexbox与不兼容轻快这就是为什么我需要走绝对定位路线。

在我的例子中,计算结果将等于20。然后将使用此计算应用宽度。E、 g。 <a style="width: 20%"> 。

2 回复 | 直到 6 年前

1

Thrallix 6 年前

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;

2

-1

Zain Farooq 6 年前

试试这个 DOMDocument .但它不支持 HTML-5 。您只需停止错误显示即可禁用警告

<?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>';
$dom = new DOMDocument;
$dom->loadHTML($html);
$anchor_elements =  $dom->getElementsByTagName('a')->length;

echo $anchor_elements/100;

?>

对于javascript,您只需要这个

var anchorlist = document.getElementsByTagName("a").length;
var anchor_length_divided_by_hundred = anchorlist/100;
console.log(anchor_length_divided_by_hundred);(function() {
  var elems = document.getElementsByTagName("a");

  for (var i = 0; i < elems.length; i++) {

        elems[i].style.width = anchor_length_divided_by_hundred + "%";
}
})();