在僞元素中計算元素和輸出

Question

我有一個類名爲「vc_tta-panels」的div。在這個div中有幾個div類，名字爲'vc_tta-panel'。我想要計算vc_tta-panels div中的div。我怎樣才能做到這一點？ 如何顯示計數結果在一個li僞元素的不同頁面上，類名爲'menu-item-4331 :: after'using content：「」;在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; 

但是如果你想所有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; 

我怎麼能顯示與類名李 僞元素在不同的頁面的計數結果「菜單項，4331 ::後」使用內容： 「」 ;在CSS？

一旦你有你的其他頁面（通過服務器端）的結果，你可以緩存那些data-attributes你的相關li。在僞元素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'), 
 
\t \t 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 { 
 
\t content: attr(data-count); 
 
\t text-align: center; font-size: 15px; line-height: 15px; 
 
\t display: inline-block; vertical-align: top; margin-left: 8px; 
 
\t width: 16px; height: 16px; 
 
\t 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"> 
 
\t <li data-count="0">Menu option one</li> 
 
\t <li data-count="0">Menu option two</li> 
 
</ul>