统计博客存档中的所有元素（数字）

Question

我一直在努力将这个jquery放在一起。最初，我想对档案的年份和月份做的是能够切换。假设我点击YEAR然后它切换All MONTHS，当我点击一个MONTH然后它切换下面的链接。切换应该使用单击的链接完成。

出现问题的是我格式化jquery脚本的方式。我希望将年份和月份作为“slideDown”或Toggle触发，但是当我点击几个月时它会切换所有月份而不是一个月。

如果它更容易使用，你可以在这里使用JSFiddle。

先谢谢你。

$('.years span').click(function() {
$('.years').addClass('active'); 
$('.months').show(); }); 

$('.months span').click(function() { 
$('.months').toggleClass('active'); 
$('.months').find('ul').slideToggle(); }); 

$('.months a').click(function() { 
$('.months').addClass('active'); 
$('.months ul').show(); });

.year-name p{
display: inline;

}
.year-name {
  display: inline;
}

.month-name p{
display: inline;

}
.month-name {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="archive-posts">
<ul>

<div class="archive-post y2019"><span class="year-name">2019 <p></p></span>
<ul>
<li class="month month-10"><span class="month-name">October <p></p>
</span>
<a href="">Return</a>
</li>

<li class="month month-9"><span class="month-name">September <p></p>
</span>
<a href="">Help</a>
<a href="">Hello</a>
</li>
</ul>
</div>

<br><br>

<div class="archive-post y2018"><span class="year-name">2018 <p></p></span>
<ul>
<li class="month month_9"><span class="month-name">July <p></p>
</span>
<a href="">A Kind Gesture</a>
</li>
</ul>
</div>

</ul>
</div>

Answer 1

使用.each()循环每年和每月，并计算该元素中的项目数。

$("#archive-posts .archive-post").each(function() {
  var y = $(this).find("li.month").length;
  $(this).find(".year-name p").text("(" + y + ")");
});

$("#archive-posts li.month").each(function() {
  var m = $(this).find("a").length;
  $(this).find(".month-name p").text("(" + m + ")");
});

.year-name p, .year-name, .month-name, .month-name p {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="archive-posts">
  <ul>

    <div class="archive-post y2019"><span class="year-name">2019 <p></p></span>
      <ul>
        <li class="month month-10"><span class="month-name">October <p></p>
</span>
          <a href="">Return</a>
        </li>

        <li class="month month-9"><span class="month-name">September <p></p>
</span>
          <a href="">Help</a>
          <a href="">Hello</a>
        </li>
      </ul>
    </div>

    <br><br>

    <div class="archive-post y2018"><span class="year-name">2018 <p></p></span>
      <ul>
        <li class="month month_9"><span class="month-name">July <p></p>
</span>
          <a href="">A Kind Gesture In Return</a>
        </li>
      </ul>
    </div>

  </ul>
</div>

顺便说一下，你的HTML无效。在<p>内不允许使用<span>。