格式化的嵌套 .each 函数答案

【问题标题】：Formatted nested .each function格式化的嵌套 .each 函数
【发布时间】：2017-01-17 21:52:19
【问题描述】：

我有一些代码：jsfiddle

var array_return1 = [];

$(".table__product td:nth-child(1)").each(function(){
    var productitems = $(this).html() 
         
    array_return1.push({ "Pvalue" : productitems }); 
});

alert(JSON.stringify(array_return1));

<table class="table__product">
  <tr>
    <td>Apple</td>
    <td>3384</td>
    <td>iPhone</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>8800</td>
    <td>Galaxy</td>
  </tr>
  <tr>
    <td>LG</td>
    <td>8684</td>
    <td>V20</td>
  </tr>
  <tr>
    <td>Google</td>
    <td>8179</td>
    <td>Pixel</td>
  </tr>
  <tr>
    <td>Blackberry</td>
    <td>4554</td>
    <td>Storm</td>
  </tr>
  <tr>
    <td>Motorolla</td>
    <td>6764</td>
    <td>Z force</td>
  </tr>
</table>

我希望根据 html 表将结果集设置为 {Pvalue:Apple Cvalue:3384}。到目前为止，我只有 Pvalue。根据我的研究，我需要使用某种嵌套的 .each() 函数。但是，我将如何使用它并同时具有这种格式。我希望每个产品都与它的费用类型相匹配。

【问题讨论】：

标签： javascript jquery html arrays json

【解决方案1】：

您只是读取每一行的第二个td 元素，所以得到结果{Pvalue:3384}

您需要迭代每一行并从第一个单元格获取Pvalue，从第二个单元格获取Cvalue。

//Iterate and create an array of object
var array_return1 = $(".table__product tr").map(function() {
  var tds = $(this).find('td');
  return {
    "Pvalue": tds.eq(0).text(), //Get text from td based on index 0
    "Cvalue": tds.eq(1).text() //Get text from td based on index 1
  }
}).get(); //To get native array

参考.map()、.eq()

var array_return1 = $(".table__product tr").map(function() {
  var tds = $(this).find('td');
  return {
    "Pvalue": tds.eq(0).text(),
    "Cvalue": tds.eq(1).text()
  }
}).get();

console.log(array_return1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table__product">
  <tr>
    <td>Apple</td>
    <td>3384</td>
    <td>iPhone</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>8800</td>
    <td>Galaxy</td>
  </tr>
  <tr>
    <td>LG</td>
    <td>8684</td>
    <td>V20</td>
  </tr>
  <tr>
    <td>Google</td>
    <td>8179</td>
    <td>Pixel</td>
  </tr>
  <tr>
    <td>Blackberry</td>
    <td>4554</td>
    <td>Storm</td>
  </tr>
  <tr>
    <td>Motorolla</td>
    <td>6764</td>
    <td>Z force</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

找到tr 而不是td，并为每个tr 访问您想要的两个td。

var array_return1 = [];

$(".table__product tr").each(function() {
  var td = $('td', this),
      productitems = td.eq(0).text(),
      productId = td.eq(1).text();

  array_return1.push({
    Pvalue: productitems,
    Cvalue: productId
  });

});

alert(JSON.stringify(array_return1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table__product">
  <tr>
    <td>Apple</td>
    <td>3384</td>
    <td>iPhone</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>8800</td>
    <td>Galaxy</td>
  </tr>
  <tr>
    <td>LG</td>
    <td>8684</td>
    <td>V20</td>
  </tr>
  <tr>
    <td>Google</td>
    <td>8179</td>
    <td>Pixel</td>
  </tr>
  <tr>
    <td>Blackberry</td>
    <td>4554</td>
    <td>Storm</td>
  </tr>
  <tr>
    <td>Motorolla</td>
    <td>6764</td>
    <td>Z force</td>
  </tr>
</table>

【讨论】：

这很特别！谢谢！