Как посчитать кол-во каждого элемента и для него посчитать сумму?

Question

[Иван Симонов]

Здравствуйте
Пытаюсь получить

<div class="item">
  <span class="count">2</span>
  x
  <span class="price">20</span>
</div>
<div class="item">
  <span class="count">1</span>
  x
  <span class="price">20</span>
</div>
<div class="item">
  <span class="count">2</span>
  x
  <span class="price">60</span>
</div>
  Total price - 100

На данный момент fiddle

Понимаю, что здесь получаю элементы без учета их кол-ва

const filtered =  items.filter(item => arr.includes(item.id))

Подскажите, как получить кол-во каждого элемента, чтобы посчитать сумму для этих элементов отдельно?

Answer 1

[Сергей Соколов]

перебрать все с классом item:
внутри искать span'ы по классам, брать их текст, умножать, складывать.
Попобуйте.

p.s. не попробовали, дождались готового решения. Надеюсь, хоть разберетесь, как работает:

Comments

[Иван Симонов]

Это разметка, то что пытаюсь получить. На данный момент не могу понять, как получить массив эл-тов с учетом их кол-ва - id1: 2, id2: 1, id3: 2

[Сергей Соколов]

Иван Симонов,

[...document.querySelectorAll(".item")]
  .map((item) => item.querySelector(".count").textContent)

[Иван Симонов]

Сергей Соколов, Это разметка, которая будет генерироваться исходя из полученных данных

[Сергей Соколов]

А, теперь вижу. Надо в вопросе указать, что есть и что хочется получить.
Из arr получите словарь id: количество.
Добавьте в него price, чтобы получилась структура типа

{
  id1: { price: X, quantity: Y },
  id2: ...
}

[Иван Симонов]

Таким способом, получил кол-во для каждого элемента

const counted = arr.reduce((acc, el) => {
    return acc[el] ? ++acc[el] : acc[el] = 1, acc
}, {})

https://jsfiddle.net/fn97etmv/
Не могу понять, как это кол-во связать с ценой исходного массива

[Сергей Соколов]

Иван Симонов, связать по id

[Иван Симонов]

Сергей Соколов, покажите, пожалуйста пример

[Сергей Соколов]

Иван Симонов, обновил ответ. Надеюсь, понятно