Javascript 对伪元素中的元素和输出进行计数

我有一个类名为“vc_tta-panels”的div。在这个div中有几个类名为“vc_tta-panel”的div。我想数一数vc_tta-panels分区中的分区。我该怎么做？ 在“使用内容：”之后，如何在类名为“menu-item-4331:：的li伪元素的不同页面上显示计数结果；在css中

<div class="vc_tta-panels">
  <div class="vc_tta-panel"></div>
  <div class="vc_tta-panel"></div>
  <div class="vc_tta-panel"></div>
</div>

---

仅计算子div：

var divsNumber = $('.vc_tta-panels > div').length;

但是如果你想要所有的div，children和children的children

var divsNumber = $('.vc_tta-panels div').length;

$（文档）.ready（函数（）{
var divsNumber=$（'.vc_tta-panels>div'）。长度；
console.log（'number:'+divsNumber）；
});


我想数一数vc_tta-panels分区中的分区。我该怎么做

用于选择元素。像这样：

var panels = document.querySelectorAll('.vc_tta-panels > .vc_tta-panel');

var count = panels.length;

这将返回一个数组（它是一个集合而不是数组）。使用其
length
属性获取所选元素的数量。像这样：

var panels = document.querySelectorAll('.vc_tta-panels > .vc_tta-panel');

var count = panels.length;

如何在li中的不同页面上显示计数结果
类名为“menu-item-4331:：after”的伪元素使用内容：
""; 在css中

<div class="vc_tta-panels">
  <div class="vc_tta-panel"></div>
  <div class="vc_tta-panel"></div>
  <div class="vc_tta-panel"></div>
</div>

一旦您在另一个页面上获得结果（通过服务器端），您可以将这些结果缓存在相关的
li
中。对伪元素CSS中的
内容使用那些
data-
属性。像这样：

var panels = document.querySelectorAll('.vc_tta-panels > .vc_tta-panel');

var count = panels.length;

第2页中的标记：

<ul class="page2">
  <li data-count="0">Menu option one</li>
</ul>


下面是一个小片段，将所有内容放在一起：


//一页1
var panels=document.queryselectoral（'.vc_tta-panels>.vc_tta-panel'），
计数=面板长度；
//通过服务器端将计数发送到另一个页面
//一旦在第2页上。。。
var menuoptions=document.querySelectorAll（'ul.page2 li'）；
//将计数添加到第一个选项的伪元素。。
菜单选项[0]。dataset.count=count
*{font-family:sans-serif；}
ul.page2 li：：之后{
内容：attr（数据计数）；
文本对齐：居中；字体大小：15px；行高：15px；
显示：内联块；垂直对齐：顶部；左边距：8px；
宽度：16px；高度：16px；
颜色：#fff；背景色：#e33；边框半径：50%；
}
第1页的

小组1
小组2
小组3

第2页

菜单选项一
菜单选项二