Забрать все значения из блоков jQuery

Question

Подскажите, пожалуйста, как можно через jquery забрать значения всех блоков (название + цена) в одну строку, с учетом того, что они добавлены динамически и мы не знаем их количество?

Формат получаемой строки: Тележка - 28000руб; Машина - 15000руб; и тд.

Предполагаю, что нужно записывать данные в массив, но не могу сообразить - как.

Пример разметки html:

<div class="sub-products__row">
  <div class="sub-products__img">
    <img data-src='../images/dest/single-product.jpg' class='lazy' alt=''>
  </div>
  <div class="sub-products__text">
    <div class="sub-products__name">Тележка ЗУБР 38750-60 ЭКСПЕРТ</div>
    <div class="sub-products__price-wrap">
      <div class="sub-products__price">
        <span class="sub-products__sum" data-price="300">300</span> ₽
      </div>
    </div>
  </div>
</div>
<div class="sub-products__row">
  <div class="sub-products__img">
    <img data-src='../images/dest/single-product.jpg' class='lazy' alt=''>
  </div>
  <div class="sub-products__text">
    <div class="sub-products__name">Тележка ЗУБР 38750-60 ЭКСПЕРТ</div>
    <div class="sub-products__price-wrap">
      <div class="sub-products__price">
        <span class="sub-products__sum" data-price="300">300</span> ₽
      </div>
      <div class="sub-products__checked">
    </div>
  </div>
</div>

Answer 1

let all = $('.sub-products__row').map(function(){
  return {
    title: $(this).find('.sub-products__name').text(), 
    price: $(this).find('.sub-products__sum').text()
  };
}).get();

console.log(all);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sub-products__row">
  <div class="sub-products__img">
    <img data-src='../images/dest/single-product.jpg' class='lazy' alt=''>
  </div>
  <div class="sub-products__text">
    <div class="sub-products__name">Тележка ЗУБР 38750-60 ЭКСПЕРТ 1</div>
    <div class="sub-products__price-wrap">
      <div class="sub-products__price">
        <span class="sub-products__sum" data-price="300">300</span> ₽
      </div>
    </div>
  </div>
</div>
<div class="sub-products__row">
  <div class="sub-products__img">
    <img data-src='../images/dest/single-product.jpg' class='lazy' alt=''>
  </div>
  <div class="sub-products__text">
    <div class="sub-products__name">Тележка ЗУБР 38750-60 ЭКСПЕРТ 2</div>
    <div class="sub-products__price-wrap">
      <div class="sub-products__price">
        <span class="sub-products__sum" data-price="300">400</span> ₽
      </div>
      <div class="sub-products__checked">
    </div>
  </div>
</div>

Answer 2

Думаю это поможет

let result = [...$(".sub-products__row div.sub-products__text")].map(item => { let res = {} ; res.name = $(".sub-products__name", item).text(); res.price = $(".sub-products__sum", item).attr("data-price");return res;});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sub-products__row">
  <div class="sub-products__img">
    <img data-src='../images/dest/single-product.jpg' class='lazy' alt=''>
  </div>
  <div class="sub-products__text">
    <div class="sub-products__name">Тележка ЗУБР 38750-60 ЭКСПЕРТ</div>
    <div class="sub-products__price-wrap">
      <div class="sub-products__price">
        <span class="sub-products__sum" data-price="300">300</span> ₽
      </div>
    </div>
  </div>
</div>
<div class="sub-products__row">
  <div class="sub-products__img">
    <img data-src='../images/dest/single-product.jpg' class='lazy' alt=''>
  </div>
  <div class="sub-products__text">
    <div class="sub-products__name">Тележка ЗУБР 38750-60 ЭКСПЕРТ 1</div>
    <div class="sub-products__price-wrap">
      <div class="sub-products__price">
        <span class="sub-products__sum" data-price="1300">1300</span> ₽
      </div>
      <div class="sub-products__checked">
    </div>
  </div>
</div>

БЛОГ НА HUSL

Забрать все значения из блоков jQuery

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