Как правильно реализовать вывод количества блоков в списке?

Question

Есть табы, состоящие из списка, по которым идет переключение табов, и сами табы со вложенными блоками. Нужно в каждом табе посчитать количество элементов и это количество вывести в соответствующем списке. Количество элементов лежащих в каждом табе ($(".tab-pane") я посчитала через each. У ссылок есть id, а у табов aria-labelledby с одинаковыми значениями, как связать атрибуты и вывести соответствующий блок в соответствующем списке? скрипт $(".tab-pane").each(function () { let a = $(this).children().length; $("nav-link").text(a);//везде добавляется последний элемент })

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="tab-1" data-toggle="tab" href="#tabs-1" role="tab" aria-controls="home" aria-selected="true">Количество <span>1</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-2" data-toggle="tab" href="#tabs-2" role="tab" aria-controls="profile" aria-selected="false">Количество <span>5</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-3" data-toggle="tab" href="#tabs-3" role="tab" aria-controls="contact" aria-selected="false">Количество <span>7</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-3" data-toggle="tab" href="#tabs-4" role="tab" aria-controls="contact" aria-selected="false">Количество <span>2</span></a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1">
        <div class="tab-block">lorem</div>
        <div class="tab-block">Cat</div>
        <div class="tab-block">Apple</div>
        <div class="tab-block">Red</div>
    </div>
    <div class="tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2">
        <div class="tab-block">Green</div>
        <div class="tab-block">Age</div>
        <div class="tab-block">Name</div>
    </div>
    <div class="tab-pane fade" id="tabs-3" role="tabpanel" aria-labelledby="tab-3">
        <div class="tab-block">q112</div>
        <div class="tab-block">334</div>
        <div class="tab-block">uuu</div>
        <div class="tab-block">888</div>
        <div class="tab-block">999</div>
        <div class="tab-block">555</div>
    </div>
    <div class="tab-pane fade" id="tabs-4" role="tabpanel" aria-labelledby="tab-4">
        <div class="tab-block">Surname</div>
        <div class="tab-block">Arrow</div>
    </div>
</div>

Answer 1

В цикле можно использовать счётчик i и с помощью конструкции $(".nav-item:nth-of-type("+(i+1)+") span") добавлять значение в нужный span. Только обратите внимание, что считать нужно не .nav-link, а именно .nav-item, иначе работать не будет:

$(".tab-pane").each(function(i){
  $(".nav-item:nth-of-type("+(i+1)+") span").text($(this).children().length);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="tab-1" data-toggle="tab" href="#tabs-1" role="tab" aria-controls="home" aria-selected="true">Количество <span></span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-2" data-toggle="tab" href="#tabs-2" role="tab" aria-controls="profile" aria-selected="false">Количество <span></span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-3" data-toggle="tab" href="#tabs-3" role="tab" aria-controls="contact" aria-selected="false">Количество <span></span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-3" data-toggle="tab" href="#tabs-4" role="tab" aria-controls="contact" aria-selected="false">Количество <span></span></a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1">
        <div class="tab-block">lorem</div>
        <div class="tab-block">Cat</div>
        <div class="tab-block">Apple</div>
        <div class="tab-block">Red</div>
    </div>
    <div class="tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2">
        <div class="tab-block">Green</div>
        <div class="tab-block">Age</div>
        <div class="tab-block">Name</div>
    </div>
    <div class="tab-pane fade" id="tabs-3" role="tabpanel" aria-labelledby="tab-3">
        <div class="tab-block">q112</div>
        <div class="tab-block">334</div>
        <div class="tab-block">uuu</div>
        <div class="tab-block">888</div>
        <div class="tab-block">999</div>
        <div class="tab-block">555</div>
    </div>
    <div class="tab-pane fade" id="tabs-4" role="tabpanel" aria-labelledby="tab-4">
        <div class="tab-block">Surname</div>
        <div class="tab-block">Arrow</div>
    </div>
</div>

БЛОГ НА HUSL

Как правильно реализовать вывод количества блоков в списке?

Ответы (1 шт):