计算伪元素中的元素并输出答案

【问题标题】：Count elements and output in a pseudo-element计算伪元素中的元素并输出
【发布时间】：2017-03-05 12:42:10
【问题描述】：

我有一个类名为“vc_tta-panels”的 div。在这个 div 中有几个类名为“vc_tta-panel”的 div。我想计算 vc_tta-panels div 中的 div。我怎样才能做到这一点？以及如何在具有类名'menu-item-4331::after'的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>

【问题讨论】：

标签： javascript css count pseudo-element

【解决方案1】：

仅计算子 div：

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

但是如果你想要所有的 div、children 和 children of children ......

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>

【讨论】：

【解决方案2】：

我想计算 vc_tta-panels div 中的 div。我该怎么做？

使用document.querySelectorAll 选择元素。像这样：

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

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

var count = panels.length;

以及如何在 li 的不同页面上显示计数结果具有类名 'menu-item-4331::after' 的伪元素使用内容： "";在 CSS 中？

在其他页面（通过服务器端）获得结果后，您可以将这些结果缓存在相关的li 上的data-attributes 中。将那些data- 属性用于伪元素CSS 中的content。像这样：

第 2 页中的标记：

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

CSS：

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

这是一个将所有内容放在一起的小sn-p：

// 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>

【讨论】：