couting элементы внутри вкладки для каждого соответствующего атрибута данных

Question

Не могли бы вы мне помочь? Как я могу подсчитать количество div с классом 'image-item', которое у меня есть для каждого содержимого вкладки, и добавить номер к html для кнопок tablinks, соответствующих этому идентификатору данных? что-то вроде Лондона (2). Париж (1). Токио (3)

Вот простой пример

https://jsfiddle.net/cz87ph6w/

let handleClick = e => {
  Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.
  e.target.classList.add("active");
  document.querySelector(`div.tabcontent[data-id*="${e.target.dataset.id}"]`).classList.add("active");
};

Array.from(document.getElementsByClassName("tablinks"), btn => btn.addEventListener('click', handleClick, false));

<div class="first-tab-component">
  <div class=" tab">
    <button class="tablinks" data-id="1">London </button>
    <button class="tablinks" data-id="2">Paris</button>
    <button class="tablinks" data-id="3">Tokyo</button>
  </div>
  <div data-id="1" class="tabcontent">
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
  <div data-id="2" class="tabcontent">
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
  <div data-id="3" class="tabcontent">
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

Answer 1

Посмотрев, я нашел несколько вариантов

JQuery:

$('.tabcontent').each(function(){
  var count = $(this).children().length;
  //add count variable to correct tab
})

Обычный JS:

var tabs = document.getElementsByClassName('tabcontent');

for(var i = 0; i < tabs.length; i++)
{
  var count = tabs[i].childElementCount; 
  //add count variable to correct tab
}

Answer 2

Вы можете немного изменить свой l oop:

Array.from(document.getElementsByClassName("tablinks"), btn => {
    btn.addEventListener('click', handleClick, false);
    const count = document.querySelectorAll(`div[data-id*="${btn.dataset.id}"] .image-item`).length;
    btn.appendChild(document.createTextNode(` (${count})`));
});

Вы получите что-то вроде этого для текста ваших кнопок:

London (2)
Paris (1)
Tokyo (3)