javascript：根据元素数组查找元素字符串的出现。出现次数 returns 0

Question

我有一个包含 n 个项目的列表。每个项目都有一个格式为 [第一部分] - [颜色] 的标题。项目具有独特的颜色。

    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - Red</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - Red</div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - Blue</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - Black</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - Silver</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - Some Color</div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - Some other Color</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - Green</div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - Black</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - Silver</div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - Silver</div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - Red</div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - Orangered</div>
       ... ...
       ...

    </div>

我想实现以下目标：

    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence">has 4 color</span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence">has 3 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence">has 5 color</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence">has 4 color</span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence">has 1 color</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence">has 4 color</span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence">has 3 color</span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence">has 3 color</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence">has 4 color</span></div>
       ... ...
       ...

    </div>

我想实现上面的方法是通过计算第一部分出现的次数。例如，我计算 n 次 [第一部分] 这也意味着该项目有相同数量的 n 颜色，因为颜色对于每个 [第一部分].

所以我正在寻找的是计算[第一部分]的出现。我在 Stack Overflow 中搜索了类似的 q/a，例如：, this, this or this

所以我想做这样的事情：

    // 1-make a nodelist of the elements i want
    let elementNodeList = document.querySelectorAll('.elem'); 
 
    // 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
    let elementArray = Array.from(elementNodeList); 

    // 3-loop my elements
    elementArray.forEach((elem) => {

        // 4-get the splittitle of the element
        let elemSplitTitle = elem.dataset.splittitle;

        // 5-compare and store this element splittitle against the entire array of elements for occurrence
        let numOfOccurance = getOccurrence(productsArray, elemSplitTitle );
        console.log(numOfOccurance); 
        // 6-display the result
        elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
    });

    function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }

但结果总是0。显然有些事情我不明白，我需要一些帮助才能弄清楚。我也尝试过

    function getOccurrence(array, value) {
       var count = 0;
       array.forEach((v) => (v === value && count++));
       return count;
    }

// 1-make a nodelist of the elements i want
let elementNodeList = document.querySelectorAll('.elem'); 

// 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
let elementArray = Array.from(elementNodeList); 

// 3-loop my elements
elementArray.forEach((elem) => {

    // 4-get the splittitle of the element
let elemSplitTitle = elem.dataset.splittitle;

    // 5-compare and store this element splittitle against the entire array of elements for occurrence
    let numOfOccurance = getOccurrence(elementArray, elemSplitTitle );
console.log(numOfOccurance); 
    // 6-display the result
elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
});

function getOccurrence(array, value) {
  return array.filter((v) => (v === value)).length;
}

    <div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence"></span></div>
       ... ...
       ...

    </div>

Answer 1

getOccurence 方法有问题。您正在将 <div></div> 元素与 Alfa Romeo.

之类的字符串进行比较

这里是 getOccurence 的改进版本：

    function getOccurrence(array, value) {
      return array.filter((v) => (v.dataset.splittitle == value)).length;
    }

全部代码：

// 1-make a nodelist of the elements i want
let elementNodeList = document.querySelectorAll('.elem'); 

// 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
let elementArray = Array.from(elementNodeList); 

// 3-loop my elements
elementArray.forEach((elem) => {

    // 4-get the splittitle of the element
let elemSplitTitle = elem.dataset.splittitle;
    // 5-compare and store this element splittitle against the entire array of elements for occurrence
    let numOfOccurance = getOccurrence(elementArray, elemSplitTitle );
console.log(numOfOccurance); 
    // 6-display the result
elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
});

function getOccurrence(array, value) {
  return array.filter((v) => (v.dataset.splittitle == value)).length;
}

<div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence"></span></div>
       ... ...
       ...

    </div>

Answer 2

// 1-make a nodelist of the elements i want
let elementNodeList = document.querySelectorAll('.elem'); 

// 2-turn the nodelist to array so i can use array functions like reduce, filter, etc
let elementArray = Array.from(elementNodeList); 

// 3-loop my elements
elementArray.forEach((elem) => {

    // 4-get the splittitle of the element
let elemSplitTitle = elem.dataset.splittitle;

    // 5-compare and store this element splittitle against the entire array of elements for occurrence
    let numOfOccurance = getOccurrence(elementArray, elemSplitTitle );
console.log(numOfOccurance); 
    // 6-display the result
elem.querySelector('.occurence').textContent = `IN ${numOfOccurance} COLORS`;
});

function getOccurrence(array, value) {
   console.log(array, value)
  return array.filter((v) => ((v.dataset.splittitle) === value)).length;
}

<div class="the-elements">
    
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Red">Alfa Romeo - <span class="occurence">has 5 colors</span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Red">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat " data-splitcolor="Blue">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Black">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Silver">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Alfa Romeo" data-splitcolor="Some other Color">Alfa Romeo - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Green">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Zastava" data-splitcolor="Black">Zastava - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Silver">BMW - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Silver">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="Fiat" data-splitcolor="Red">Fiat - <span class="occurence"></span></div>
       <div class="elem" data-splittitle="BMW" data-splitcolor="Orangered">BMW - <span class="occurence"></span></div>
       ... ...
       ...

    </div>

Answer 3

let AlfaRomeoNumber,BMWNumber,FiatNumber,ZastavaNumber;
BMWNumber = AlfaRomeoNumber = FiatNumber = ZastavaNumber = 0;


document.querySelectorAll('[data-split-title]').forEach(item => {
   
    if(item.dataset.splitTitle == 'AlfaRomeo') {
        AlfaRomeoNumber++;
    } else if(item.dataset.splitTitle == 'BMW') {
        BMWNumber++;
    } else if(item.dataset.splitTitle == 'Fiat') {
        FiatNumber++;
    } else if(item.dataset.splitTitle == 'Zastava') {
        ZastavaNumber++;
    }
    
}) 

document.querySelectorAll('[data-split-title = BMW]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${BMWNumber} color`;
    item.innerHTML = `BMW - `;
    item.append(newSpan);
})

document.querySelectorAll('[data-split-title = AlfaRomeo]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${AlfaRomeoNumber} color`;
    item.innerHTML = `AlfaRomeo - `;
    item.append(newSpan);
})

document.querySelectorAll('[data-split-title = Fiat]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${FiatNumber} color`;
    item.innerHTML = `Fiat - `;
    item.append(newSpan);
})

document.querySelectorAll('[data-split-title = Zastava]').forEach(item => {
    let newSpan = document.createElement('span');
    newSpan.classList.add('occurence')
    newSpan.innerHTML = `has ${ZastavaNumber} color`;
    item.innerHTML = `Zastava - `;
    item.append(newSpan);
})
console.log(AlfaRomeoNumber,BMWNumber,FiatNumber,ZastavaNumber)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="the-elements">
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Red">Alfa Romeo - Red</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Red">BMW - Red</div>
        <div class="elem" data-split-title="Fiat" data-splitcolor="Blue">Fiat - Blue</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Black">Alfa Romeo - Black</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Silver">Alfa Romeo - Silver</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Some Color">Alfa Romeo - Some Color</div>
        <div class="elem" data-split-title="AlfaRomeo" data-splitcolor="Some other Color">Alfa Romeo - Some other Color</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Green">BMW - Green</div>
        <div class="elem" data-split-title="Zastava" data-splitcolor="Black">Zastava - Black</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Silver">BMW - Silver</div>
        <div class="elem" data-split-title="Fiat" data-splitcolor="Silver">Fiat - Silver</div>
        <div class="elem" data-split-title="Fiat" data-splitcolor="Red">Fiat - Red</div>
        <div class="elem" data-split-title="BMW" data-splitcolor="Orangered">BMW - Orangered</div>
     </div>
    <script src="./addNumber.js"></script>
</body>
</html>

javascript：根据元素数组查找元素字符串的出现。出现次数 returns 0

javascript: Find occurrence of element string against array of elements. Occurrence returns 0

html

javascript

find-occurrences