Search code examples
jquerycssblogsarchive

Count All Elements (Numbers) In Blog Archive

I have been struggling with putting this jquery together. Originally, what I wanted to do with the archive's years and months was it to able to toggle. Let's say I click on YEAR then it toggle down All MONTHS, and when I clicked a MONTH then it toggle down the links below. Toggle should be done with the clicked link.

What went wrong was the way I formatted the jquery script. I'd want years and months be triggered as "slideDown" or Toggle, but when I clicked on the months it toggle all the months instead of one.

You may use the JSFiddle here if it's easier to work with.

Image Description

Thank you in advanced.

$('.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>

Solution

  • Use .each() to loop over each year and month, and count the number of items within that element.

    $("#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>

    BTW, your HTML is invalid. <p> is not allowed inside <span>.