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

Question

我一直在努力将这个 jquery 放在一起。最初，我想对存档的年份和月份做的是能够切换。假设我点击 YEAR，然后它会向下切换所有 MONTHS，当我单击 MONTH 时，它会向下切换下面的 links。应通过单击 link.

来完成切换

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

如果更容易使用，您可以使用此处的 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>.

内

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

Count All Elements (Numbers) In Blog Archive

jquery

css

blogs

archive