如何顯示具有相同數據 ID 和 class 的元素數量？

Question

我共有 15 個元素，其中 13 個元素具有相同的 data- id="ankush" ，14 個元素具有相同class="ankush" ，1 個元素只有id="ankush" 。 所以我想顯示總數。 具有 data-id 和 class 的元素？

<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"  data-id="ankush"></div>
<div class="ankush"></div>
<div class="ankush" id="ankush"></div>

Answer 1

您可以使用querySelectorAll根據給定的選擇器獲取元素列表。 .ankush[data-id="ankush"]選擇器將返回ankush class 和data-id等於ankush的元素。 您可以使用以下length屬性獲取總長度：

 document.getElementById('total').textContent = document.querySelectorAll('.ankush[data-id="ankush"]').length;

 <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush"></div> <div class="ankush" id="ankush"></div> <div>total: <span id="total">0</span></div>

Answer 2

這有幫助嗎？

在這種情況下，根據您的問題，我正在結合從“class”和“data-id”中檢索“ankush”的邏輯，以便您獲得總匹配數。

 var matchingResult = document.querySelectorAll(' [data-id="ankush"]', '[class="ankush"] '); console.log(matchingResult.length);

 <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush"></div> <div class="ankush" id="ankush"></div>

Answer 3

 // rootElement must be in format // `.someClassName *` // or `#someElementID *` // or `tagName *` // // NOTE: DONT REMOVE THE `*` const rootElement = "#container *"; const count = [...document.querySelectorAll(rootElement)].map(el => ({ dataset: Object.assign({}, el.dataset), classList: el.classList.value.split(" ").filter(c => c.length) })).reduce((acc, { dataset, classList }) => ( Object.keys(dataset).forEach(ds => { acc.dataset[ds] = acc.dataset[ds] || {}; acc.dataset[ds][dataset[ds]] = 1 + (acc.dataset[ds][dataset[ds]] || 0); }), classList.forEach(klass => { acc.classList[klass] = 1 + (acc.classList[klass] || 0) }), acc ), { dataset: {}, classList: {} }); console.log(count);

 <main id="container"> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush2" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush2" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush1"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush"></div> <div class="ankush" data-id="ankush1"></div> <div class="test" data-test="pass"></div> <div data-test="pass"></div> <div data-test="pass"></div> <div class="ankush"></div> <div class="ankush" id="ankush"></div> </main>