Подсчитать все элементы (числа) в архиве блога - PullRequest
Новая
       32

Подсчитать все элементы (числа) в архиве блога

0 голосов
/ 18 сентября 2018

Я изо всех сил пытался собрать этот jquery.Первоначально, то, что я хотел сделать с годами и месяцами архива - это возможность переключаться.Допустим, я нажимаю на ГОД, затем он переключается вниз на все МЕСЯЦЕВ, а когда я нажимал на МЕСЯЦ, тогда он переключал ссылки внизу.Переключение должно быть сделано по нажатой ссылке.

Что пошло не так, как я отформатировал скрипт jquery.Я бы хотел, чтобы годы и месяцы запускались как «slideDown» или Toggle, но когда я нажимал на месяцы, они переключали все месяцы вместо одного.

Вы можете использовать JSFiddle здесьесли с ним легче работать.

Image Description

Спасибо заранее. 

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

1 Ответ

0 голосов
/ 18 сентября 2018

Используйте .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>.

...