javascript: Найти вхождение строки элемента в массиве элементов. Вхождение возвращает 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 цветов, поскольку цвета уникальны для каждой [первой части].

Итак, я ищу, чтобы подсчитать вхождение [первая часть]. Я искал переполнение стека для подобных q / a like: 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>

Answer 1

// 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 2

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>

Answer 3

Проблема с методом 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>