Question

我有一个带有班级名称的div＆＃39; vc_tta-panels＆＃39;。在这个div中有几个具有类名＆＃39; vc_tta-panel＆＃39;的div。我想计算vc_tta-panels div中的div。我怎样才能做到这一点？如何在li伪元素中使用类名称菜单项-4331 ::＆使用内容：＆＃34;＆＃34 ;;在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>

Answer 1

仅计算儿童div：

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

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

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-panels div中的div。我怎么能这样做？

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

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

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

var count = panels.length;

如何在li中的不同页面上显示计数结果具有类名的伪元素＆＃39; menu-item-4331 :: after＆＃39;使用内容：＆＃34;＆＃34 ;;在css？

在其他页面上（通过服务器端）获得结果后，您可以将data-attributes中的结果缓存在相关li上。将这些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); 
}

这是一个将所有内容组合在一起的小片段：

＆＃13;

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

＆＃13;

* { 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%;
}

＆＃13;

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

＆＃13;

计算伪元素中的元素和输出

2 个答案: