主页 / 问题 / 1204167
Accepted
Александр
Asked:2021-11-13 21:33:40 +0000 UTC2021-11-13 21:33:40 +0000 UTC

从 jQuery 块中检索所有值

  • 772

请告诉我，如何使用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>

javascript

2 个回答

  1. Best Answer

    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>

    • 1

  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>

    • 0

相关问题