javascript：针对元素数组查找元素字符串的出现。出现返回 0答案

【问题标题】：javascript: Find occurrence of element string against array of elements. Occurrence returns 0javascript：针对元素数组查找元素字符串的出现。出现返回 0
【发布时间】：2020-07-10 10:51:46
【问题描述】：

我有一个包含 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 次 [first part]，这也意味着该项目有相同数量的 n 颜色，因为每个 [first part] 的颜色都是唯一的。

所以我正在寻找的是计算[第一部分]的发生率。我在 Stack Overflow 上搜索过类似的问题，例如：this、this、this 或 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>

【问题讨论】：

标签： javascript html find-occurrences

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：