在对象数组上使用forEach（）后设置div样式

Question

我有一个对象数组（myArray），我使用forEach（）返回单个对象，我试图将每个对象的文本显示在页面上，但它们看起来都重叠在一起。有什么办法可以设置样式，使它们在页面上均匀显示？即彼此扩散？

  myArray.forEach(function(myArraysObj) {
  var text = $('<div></div>').addClass('text').text(myArraysObj.text);
  $('body').append(text);

Answer 1

 var addedText=myArraysObj.text+'\n';
 var text = $('<div></div>').addClass('text').text(addedText);

Answer 2

您可以尝试如下操作：

  for (var x in myArraysObj) {

     var text = $('<div></div>').addClass('text').text(x.text);
      $('body').append(text);
    }

Answer 3

是的，您可以使用CSS中的nth-child伪选择器分别设置样式：

.text:nth-child(1) {color: red;}
.text:nth-child(2) {color: orange;}
.text:nth-child(3) {color: yellow;}

<span class="text">Some text</span>
<span class="text">Some text</span>
<span class="text">Some text</span>