如何将2.Each()列表与jQuery组合成一个数组

时间:2017-01-20 22:22:26

标签: javascript jquery

我正在尝试将两个列表组合使用jQuery .each()为每个元素创建一个列表。实际上,它是2个迭代的表格单元格。

<table border="1">
  <tr>
    <td class="name">item One</td>
    <td class="time">item One Time</td>
    </tr>
  <tr>
    <td class="name">item Two</td>
    <td class="time">item Two Time</td>
    </tr>
  </table>

当前的jQuery看起来像这样:

var allProductNames = [];
 $('.cart .name').each(function(){
   var cartProduct = $(this).text();
   allProductNames.push(cartProduct);
 });

 var allProductTimes = [];
 $('.cart .time').each(function(){
   var cartProductDateTime = $(this).text();
   allProductTimes .push(cartProductDateTime);
 });

 var allProductNamesList = allProductNames.join();
 var allProductTimesList = allProductTimes.join();

然后我希望我的结果以下列格式输出

'项目一:项目一次','项目二:项目二次',等等。

我知道我快到了。任何人都可以指出我正确的方向或告诉我如何将两个数组加入我想要的格式?

3 个答案:

答案 0 :(得分:3)

我想一个简单的方法就是循环tr并从name text中构建索引,从time text构建索引。

var obj = {};

$('.cart tr').each(function(i, tr) {
  var $tr = $(tr);
  if ($tr.find('.product').text() !== "") {
    obj[$.trim($tr.find('.product').text())] = $.trim($tr.find('.MuseumDateTime').text())
  }
})

我已添加$.trim()以删除尾随和前导空格。我还确保列中存在数据,以确保您的输出中没有空白。

Have a look here

答案 1 :(得分:2)

使用jQuery.map()函数的解决方案:

var arr = $.map($('.cart tr'),function(tr, i){
    return $(tr).find('.name').text() +':'+ $(tr).find('.time').text();
});

console.log(arr)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class='cart'>
  <tr>
    <td class="name">item One</td>
    <td class="time">item One Time</td>
    </tr>
  <tr>
    <td class="name">item Two</td>
    <td class="time">item Two Time</td>
    </tr>
  </table>

答案 2 :(得分:1)

而不是join,请使用for循环:

// where text will be accumulated
var text = "";
// loop through all names and times (should be of the same length)
for(var i = 0; i < allProductNames.length; i++) {
    // accumulate the text in the format you like
    text += "'" + allProductNames[i] + ": " + allProductTimes[i] + "',";
}
// remove the trailing ','
text = text.slice(0, -1);

示例:

var allProductNames = [];
 $('.name').each(function(){
   var cartProduct = $(this).text();
   allProductNames.push(cartProduct);
 });

 var allProductTimes = [];
 $('.time').each(function(){
   var cartProductDateTime = $(this).text();
   allProductTimes .push(cartProductDateTime);
 });

var text = "";
for(var i = 0; i < allProductNames.length; i++) {
    text += "'" + allProductNames[i] + ": " + allProductTimes[i] + "',";
}
text = text.slice(0, -1);
    
console.log(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="name">item One</td>
    <td class="time">item One Time</td>
  </tr>
  <tr>
    <td class="name">item Two</td>
    <td class="time">item Two Time</td>
  </tr>
</table>