如何計算標簽內標簽/元素的數量並減小字體大小

Question

我如何計算語義或 em 標簽內的標簽數量，我認為哪個沒問題，但我想計算所有這些直到最后一個。 我想獲取語義或 em 標簽內的標簽數量，然后檢查標簽 < 5 是否將字體大小減小到 8pt

 <div class="formula__content match js-match" data-color="#ff5600" data-algorithm-type="f" style="background-color: rgb(255, 86, 0); color: rgb(0, 0, 0);"> <em class="match js-match" data-algorithm-type="f1" data-color="#f2a3ca" style="padding: 10px 0px;"> <semantics> <annotation>jfrefeofjeroieofjerfje<apply>rofjerofjofoerjrf</apply>eorfefjfre<csymbol>feofjeroieo</csymbol>fjerfjerofjerofjofoerjrfeorfefjfrefe<annotation>ofjeroieofje</annotation>rfjerofjerofjof</annotation> </semantics> </em> </div> <br> <div class="formula__content match js-match" data-color="#ff5600" data-algorithm-type="f" style="background-color: rgb(0, 200, 150); color: rgb(0, 0, 0);"> <em class="match js-match" data-algorithm-type="f2" data-color="#f2a3ca" style="padding: 10px 0px;"> <semantics> <annotation>jfrefe<apply>ofjeroie</apply>ofjerfje<apply>rofjerofjofoerjrf</apply>eorfefjfre<csymbol>feofjeroieo</csymbol>fjerfjer<apply>ofjerofjofoer</apply>jrfeorfefjfrefe<annotation>ofjeroieofje</annotation>rfjerofjerofjof</annotation> </semantics> </em> </div>

這可以通過 jQuery/javascript 中的標簽來完成，因為我無法向語義標簽中的所有不同標簽添加類或 id 嗎？

第一個語義標簽在 annotation、apply、csymbol、annotation 中有 5 個標簽。

第二個有 6 個：annotation、apply、apply、csymbol、apply、annotation。

任何幫助將不勝感激。

Answer 1

您可以遞歸查詢特定 HTML 元素的所有子元素並相應地增加計數器。

為此，我們需要獲得對相關對象的引用——例如<semantics>標簽。 JavaScript 提供了getElementsByTagName()函數，它返回一個 HTMLCollection - 或多或少是一個數組。

在您的情況下，它將由兩個對象組成，因為有兩個<semantics>標簽。 如果我們感興趣的是第一個，我們現在養活這個對象document.getElementsByTagName("semantics")[0]到上述功能和查詢它的。孩子財產-再次返回的HTMLCollection。 如果我們這樣做，只要還有孩子，我們最終就可以得到孩子的總數。

下面是一個例子：

 let number = 0; function count(ele) { var children = ele.children; for (var a = 0; a < children.length; a++) { number++; count(children[a], number) } } count(document.getElementsByTagName("semantics")[0]); console.log("children: " + number); number = 0; count(document.getElementsByTagName("semantics")[1]); console.log("children: " + number);

 <div class="formula__content match js-match" data-color="#ff5600" data-algorithm-type="f" style="background-color: rgb(255, 86, 0); color: rgb(0, 0, 0);"> <em class="match js-match" data-algorithm-type="f1" data-color="#f2a3ca" style="padding: 10px 0px;"> <semantics> <annotation>jfrefeofjeroieofjerfje<apply>rofjerofjofoerjrf</apply>eorfefjfre<csymbol>feofjeroieo</csymbol>fjerfjerofjerofjofoerjrfeorfefjfrefe<annotation>ofjeroieofje</annotation>rfjerofjerofjof</annotation> </semantics> </em> </div> <br> <div class="formula__content match js-match" data-color="#ff5600" data-algorithm-type="f" style="background-color: rgb(0, 200, 150); color: rgb(0, 0, 0);"> <em class="match js-match" data-algorithm-type="f2" data-color="#f2a3ca" style="padding: 10px 0px;"> <semantics> <annotation>jfrefe<apply>ofjeroie</apply>ofjerfje<apply>rofjerofjofoerjrf</apply>eorfefjfre<csymbol>feofjeroieo</csymbol>fjerfjer<apply>ofjerofjofoer</apply>jrfeorfefjfrefe<annotation>ofjeroieofje</annotation>rfjerofjerofjof</annotation> </semantics> </em> </div>

更新

如上所述， document.getElementsByTagName("semantics")返回一個 HTMLCollection。 使用一個簡單的 for 循環，我們可以迭代它的元素並在子元素的數量低於 5 時執行一個條件。

由於您想減小<semantics>父<em>元素的字體大小，我們可以使用.parentElement屬性來獲取對它的引用，並最終使用.style.fontSize更改它的字體大小。

這是另一個例子：

 function count(ele) { var children = ele.children; for (var a = 0; a < children.length; a++) { number++; count(children[a], number) } } var number; var semantics = document.getElementsByTagName("semantics"); for (var a = 0; a < semantics.length; a++) { number = 0; count(semantics[a]); if (number < 5) { semantics[a].parentElement.style.fontSize = "8px"; } }

 <div class="formula__content match js-match" data-color="#ff5600" data-algorithm-type="f" style="background-color: rgb(255, 86, 0); color: rgb(0, 0, 0);"> <em class="match js-match" data-algorithm-type="f1" data-color="#f2a3ca" style="padding: 10px 0px;"> <semantics> <annotation>jfrefeofjeroieofjerfje<apply>rofjerofjofoerjrf</apply>eorfefjfre<csymbol>feofjeroieo</csymbol>fjerfjerofjerofjofoerjrfeorfefjfrefe<annotation>ofjeroieofje</annotation>rfjerofjerofjof</annotation> </semantics> </em> </div> <br> <div class="formula__content match js-match" data-color="#ff5600" data-algorithm-type="f" style="background-color: rgb(0, 200, 150); color: rgb(0, 0, 0);"> <em class="match js-match" data-algorithm-type="f2" data-color="#f2a3ca" style="padding: 10px 0px;"> <semantics> <annotation>jfrefe<apply>ofjeroie</apply>ofjerfje<apply>rofjerofjofoerjrf</apply>eorfefjfre<csymbol>feofjeroieo</csymbol>fjerfjer<apply>ofjerofjofoer</apply>jrfeorfefjfrefe<annotation>ofjeroieofje</annotation>rfjerofjerofjof</annotation> </semantics> </em> </div>