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

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

这是您必须做的，以获得每个.spName和.zPr的文本，首先在li中使用jQuery .each函数，然后再从li获得所有的p，通过它们的.children和类名获取所需的文本和数据。

阅读有关.each jQuery函数这里的更多信息

阅读有关.children jQuery函数这里的更多信息

我还修改了您的HTML，因为它被正确地添加到每个元素和span中。

运行下面的片段，以确保它的工作。

​

$('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给出了正确的答案！为了帮助其他人解决类似的问题，我接受了他的回答，并编辑了一些小错误。谢谢您，堆栈溢出和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>

​