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

Question

我有一个类名称为‘vc_tta-panel’的div。在这个div中有几个div，类名为'vc_tta-panel‘。我想要计算vc_tta-panel div中的div。我该怎么做呢？在css中，如何在一个类名为'menu-item-4331::after‘using content：""；的li伪元素中显示计数结果？

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

Answer 1

要仅计算子div，请执行以下操作：

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

但是如果你想要所有的div，孩子和孩子的孩子...

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

​

$(document).ready(function(){
    var divsNumber = $('.vc_tta-panels > div').length;
    console.log('Numbers: ' + divsNumber);
    });

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 
 <div class="vc_tta-panels">
  <div class="vc_tta-panel"></div>
  <div class="vc_tta-panel"></div>
  <div class="vc_tta-panel"></div>
</div>

​

要将其发送到另一个页面，您可以使用查询字符串：

 var divsNumber = $('.vc_tta-panels > div').length;
 window.location.href = ANOTHERPAGE.html?number=divsNumber;

在另一个页面中获取这个数字：

<script>
    (function ($)
    {
        $.QueryString = (function (a)
        {
            if (a == "") return {};
            var b = {};
            for (var i = 0; i < a.length; ++i)
            {
                var p = a[i].split('=');
                if (p.length != 2) continue;
                b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
            }
            return b;
        })(window.location.search.substr(1).split('&'))
    })(jQuery);
    var num = $.QueryString["number "];
    $('.menu-item-4331').after().css('content', num);
</script>

Answer 2

我想计算vc_tta-

div中的div。我该怎么做呢？

使用document.querySelectorAll键选择图元。如下所示：

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

这将返回一个NodeList (它是一个集合，而不是一个数组)。使用其length属性获取所选元素的数量。如下所示：

var count = panels.length;

在css中使用content：""；之后，如何在类名为‘

-item-4331：：after’的li伪元素中显示计数结果？

在其他页面上(通过服务器端)获得结果后，可以将这些结果缓存到相关li上的data-attributes中。在伪元素CSS中为content使用这些data-属性。如下所示：

第2页中的标记：

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

CSS：

ul.page2 li::after {
  content: attr(data-count); 
}

下面是将所有内容放在一起的一小段代码：

​

// One page 1
var panels = document.querySelectorAll('.vc_tta-panels > .vc_tta-panel'), 
		count = panels.length;

// Send the count to another page via server-side
// Once on the page 2...

var menuoptions = document.querySelectorAll('ul.page2 li');
// Add the count to pseudo-element of first option..
menuoptions[0].dataset.count = count;

* { font-family: sans-serif; }
ul.page2 li::after {
	content: attr(data-count); 
	text-align: center; font-size: 15px; line-height: 15px;
	display: inline-block; vertical-align: top; margin-left: 8px;
	width: 16px; height: 16px;
	color: #fff; background-color: #e33; border-radius: 50%;
}

<h3>On page 1</h3>
<div class="vc_tta-panels">
  <div class="vc_tta-panel">panel 1</div>
  <div class="vc_tta-panel">panel 2</div>
  <div class="vc_tta-panel">panel 3</div>
</div>
<hr />
<h3>On page 2</h3>
<ul class="page2">
	<li data-count="0">Menu option one</li>
	<li data-count="0">Menu option two</li>
</ul>

​