在 div 中搜索特定數據屬性並返回匹配數

Question

我有 4 個按鈕和 10 個 div。 每個 div 都有一個 data-id-cat 屬性，等於 1-3 中的一個數字。 我想要實現的只是計算有多少 div 有 data-id-cat='1'，有多少 ='2' 等等，並將結果打印為按鈕內的文本。

例如，如果我有 4 個屬性為 data-id-cat='2' 的 div，我想打印 4 個。

我嘗試創建一個空數組，並為每個匹配項將匹配項推入數組，然后返回數組長度。 不知道我做錯了什么。

allCategories.forEach(cat => {
    if(cat.getAttribute('data-id-cat') === '1') {
        countArray.push(cat)
        projectNumber[1].textContent = countArray.length
    } else if(cat.getAttribute('data-id-cat') === '2') {
        countArray.push(cat)
        projectNumber[2].textContent = countArray.length
    } else if(cat.getAttribute('data-id-cat') === '3') {
        countArray.push(cat)
        projectNumber[3].textContent = countArray.length 
    } else {
        projectNumber[0].textContent = allCategories.length
    }
})

Answer 1

瀏覽器會很樂意為您計算它們：

let sum = 0;
for (let n = 1; n <= 3; ++n) {
    const count = document.querySelector(`div[data-id-cat="${n}"]`).length;
    sum += count;
    projectNumber[n].textContent = count;
}
projectNumber[0].textContent = sum;

Answer 2

使用Array.prototype.reduce()減少到 object ，其中鍵是 id-cat 值，值是遞增計數。

 const countCat = () => { return [...document.querySelectorAll("[data-id-cat]")].reduce((ob, el) => { const c = el.dataset.idCat; ob[c] |= 0; ob[c] += 1; return ob; }, {}); } console.log(countCat())

 <div data-id-cat="3"></div> <div data-id-cat="1"></div> <div data-id-cat="2"></div> <div data-id-cat="3"></div> <div data-id-cat="1"></div> <div data-id-cat="1"></div> <div data-id-cat="1"></div>