javascript - 计算每个相应数据属性的选项卡内的项目

Question

你能帮我解决这个问题吗？如何计算每个 tabcontent 的 'image-item' 类的 div 数量，并将数字附加到与该数据 ID 对应的 tablinks 按钮的 html 中？像伦敦（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>

标签： javascriptcounttabscustom-data-attribute

Answer 1

看了之后我发现了一些选择

查询：

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