将数组中的每个元素放在一个段落中答案

【问题标题】：Put every element from an array in a paragraph将数组中的每个元素放在一个段落中
【发布时间】：2017-08-30 02:03:45
【问题描述】：

我有一个包含一些元素的 json，在分支上我有一个名为 cars 的数组

    for(var i=0;i<itemsArray;i++)
    {    
       $('.red').append('<p class="col-xs-2 no-padding text-format">' + item[i].cars + '</p>');
    }

数组的外观：

  "cars": ["dawdawd","wadwad","wadwad","wad"];

我需要将这个数组中的每个元素放在一个段落中，就像我使用 append 一样；

例如：

<p class="col-xs-2 no-padding text-format">dawdawd</p>
<p class="col-xs-2 no-padding text-format">wadwad</p>

编辑：

完整数组：

 "description": "asdasd",
 "name": "geaaar",
 "shop": "http://google.com",
 "date": "2016-12-31T00:00:00.000Z",
 "cars": [
          "dawdawd",
          "wadwad",
          "wadwad",
          "wad"
        ],




  var itemsArray = data.data.my_Array.length; //length of the array

【问题讨论】：

itemsArray的内容是什么？ cars 数组还是 json 数据？

标签： javascript jquery html arrays

【解决方案1】：

您应该使用length 属性来iterate 数组项。

for(var i=0;i<itemsArray.length;i++)
                       ^^^^^^^^
{    
   $('.red').append('<p class="col-xs-2 no-padding text-format">' + itemsArray[i].cars + '</p>');
}

另外，您可以使用forEach 方法，该方法接受回调函数作为参数。

itemsArray.forEach(function(item){
    $('.red').append('<p class="col-xs-2 no-padding text-format">' + item.cars + '</p>');
});

【讨论】：

嗨，我的罗马尼亚人:)。我正在使用 .length 进行迭代..但我有更多元素..
您可以使用forEach 方法，它接受像参数一样的回调函数。
更好的是使用迭代器函数，例如Array#forEach，而不必担心length 和increment 和get 的值。 jQuery 甚至带有 each 方法，如果你的浏览器太旧的话。

【解决方案2】：

试试

var paras ='';
for(var i=0;i<itemsArray.length;i++) {
     paras += '<p>'+itemsArray[i]+'</p>';
}

循环后，

$('.red').html(paras);

【讨论】：

【解决方案3】：

var obj = {
  "description": "asdasd",
  "name": "geaaar",
  "shop": "http://google.com",
  "date": "2016-12-31T00:00:00.000Z",
  "cars": [
    "dawdawd",
    "wadwad",
    "wadwad",
    "wad"
  ]
};

var $container = $(".red");
obj.cars.forEach(function(car) {   // for each car in obj.cars array
  $container.append("<p>" + car + "</p>"); // add the car as a paragraph inside the div .red
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red"></div>

【讨论】：

【解决方案4】：

在阵列上使用join。

var obj = {
  "description": "asdasd",
  "name": "geaaar",
  "shop": "http://google.com",
  "date": "2016-12-31T00:00:00.000Z",
  "cars": [
    "dawdawd",
    "wadwad",
    "wadwad",
    "wad"
  ]
};

$('.red').append(obj.cars.length ? '<p>' + obj.cars.join('</p><p>') + '</p>' : '');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red"></div>

【讨论】：