Вывести и разбить текст с одинаковыми классами

Question

Есть товары в корзине в которых можно менять кол-во

<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-title">Пицца "Цезарь с виноградом"</div>
<span class="t706__product-quantity">2</span>
</div>

<div class="t706__product" data-cart-product-i="1">
<div class="t706__product-title">Пицца "Салями"</div>
<span class="t706__product-quantity">1</span>
</div>

<div class="order__product">Состав заказа:</div>

Нужно передать эти данные в div с текстом "Состав заказа:", чтобы они имели вид: Пицца "Цезарь с виноградом" 2 шт., Пицца "Салями" 1 шт. (если название блюда одно то - Пицца "Цезарь с виноградом" 2 шт.).

Answer 1

let orderText = ([...document.querySelectorAll('.t706__product')]
                .map(p => `${p.children[0].textContent} ${p.children[1].textContent} шт.`))
                .join(', ');
                
document.querySelector('.order__product').textContent = `Состав заказа: ${orderText}`;

<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-title">Пицца "Цезарь с виноградом"</div>
<span class="t706__product-quantity">2</span>
</div>

<div class="t706__product" data-cart-product-i="1">
<div class="t706__product-title">Пицца "Салями"</div>
<span class="t706__product-quantity">1</span>
</div>

<div class="order__product"></div>

БЛОГ НА HUSL

Вывести и разбить текст с одинаковыми классами

Ответы (1 шт):