如何从列表中收集数据并将其导出为原始文本

Question

我被 JavaScript/jQuery 整理东西困住了。

这是我的 HTML:

<ul id="container">
  <li><span class="spName">insalata mista</span>
    <p class="spPr"><span class="zPr">6,90</span> €</p>
    <p class="spPrExtra"><span class="spName">+Parmesan</span> <span class="zPr">1,50</span></p>
    <p class="spPrExtra"><span class="spName">+Mozzarella</span> <span class="zPr">2,00</span></p>
  </li>
  <li><span class="spName">spaghetti al sugo</span>
    <p class="spPr"><span class="zPr">8,20</span></p>
    <p class="spPrExtra"><span class="spName">+Champignons</span> <span class="zPr">1,00</span> €<br></p>
  </li>
</ul>

我需要原始文本的输出，从列表中收集部分，结果如下：

insalata mista 6,90
+Parmesan 1,50
+Mozzarella 2,00
spaghetti al sugo 8,20
+Champignons 1,00

欢迎任何帮助！

Answer 1

这是使用 jQuery 获取每个 .spName 和 .zPr 的文本所要做的。先在 li 中获取每个函数，然后再从那里获取.each 所有 p 通过他们的 .children 和 class-names

获得所需的文本和数据

详细了解 .each jQuery 函数 here

详细了解 .children jQuery 函数 here

我还对您的 HTML 进行了一些更改，因为它已正确添加到每个元素和跨度中。

运行下面的代码片段以查看它是否正常工作。

$('li').each(function() {
  $(this).children('p').each(function() {
    $('#plain_text').append($(this).children('.spName').text() + ' ' + $(this).children('.zPr').text()+'<br>')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="container">
  <li>
    <p>
      <span class="spName">insalata mista</span><span class="zPr">6,90 €</span> €</p>
    <p><span class="spName">+Parmesan</span> <span class="zPr">1,50</span></p>
    <p class="spPrExtra"><span class="spName">+Mozzarella</span> <span class="zPr">2,00</span></p>
  </li>
  <li>
    <p><span class="spName">spaghetti al sugo</span><span class="zPr">8,20</span></p>
    <p class="spPrExtra"><span class="spName">+Champignons</span> <span class="zPr">1,00</span> €<br></p>
  </li>
</ul>


<div id="plain_text"></div>

Answer 2

AlwaysHelping给出了正确答案！只是为了帮助其他有类似问题的人，我接受了他的回答并编辑了一点错字。谢谢 Whosebug 和 AlwaysHelping – 在我尝试了两天不成功后，你们很快就帮助了我！

  $('li').each(function() {
    $(this).children('p').each(function() {
      $('#plain_text').append($(this).children('.spName').text() + ' ' + $(this).children('.zPr').text()+'<br>')
    })
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<ul id="container">
  <li>
    <p>
      <span class="spName">insalata mista</span> <span class="zPr">6,90</span>
    </p>
    <p class="spPrExtra">
      <span class="spName">+Parmesan</span> <span class="zPr">1,50</span>
    </p>
    <p class="spPrExtra">
      <span class="spName">+Mozzarella</span> <span class="zPr">2,00</span>
    </p>
  </li>
  <li>
    <p>
      <span class="spName">spaghetti al sugo</span> <span class="zPr">8,20</span>
    </p>
    <p class="spPrExtra">
      <span class="spName">+Champignons</span> <span class="zPr">1,00</span>
    </p>
  </li>
</ul>

<div id="plain_text"></div>

如何从列表中收集数据并将其导出为原始文本

How to collect data from a list and export it as raw text

javascript

jquery

listview

data-collection