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

Question

你能帮我解决这个问题吗？我如何计算每个标签内容中 'image-item' class 的 div 的数量，并将该数字附加到与该数据对应的标签链接按钮的 html - ID？类似于伦敦 (2)。巴黎 (1)。东京 (3)

我这里有一个简单的例子

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

您可以稍微修改一下循环：

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)

Answer 2

看了之后我找到了一些选项

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
}

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

couting items inside tab for each corresponding data-attribute

javascript

tabs

count

custom-data-attribute