在对象数组上使用 forEach() 后样式化 div答案

【问题标题】：Styling divs after using forEach() on an array of objects在对象数组上使用 forEach() 后样式化 div
【发布时间】：2018-10-17 13:17:16
【问题描述】：

我有一个对象数组 (myArray)，我使用 forEach() 来取回各个对象，我试图让每个对象的文本显示在页面上，但它们都出现在彼此之上。有没有办法可以设置它们的样式，使它们在页面上显得统一？即彼此分散？

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

【问题讨论】：

这是一个 css 的东西。 .textclass 可能有 position: absolute;
由于语法错误，此代码不会执行您建议的操作。另外，请包括使用的 CSS（正如 Jonas 指出的那样）。
我已经从绝对位置更改了位置，它不再重叠，谢谢。但是是否可以为每个由该函数创建的 div 单独设置样式？
什么是语法错误？
.text { font-family:baskerville,'Libre Baskerville', serif;字体样式：斜体；字体大小：12pt；宽度：300 像素； }

【解决方案1】：

是的，您可以使用 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>

【讨论】：

谢谢，如果不知道数组的长度怎么办？即每次刷新页面时数组的长度都会改变
在这种情况下，您可以直接在 js 中设置样式：var styles = [{"color":"red", "font-size": "12px"}, {"color":"blue", "font-size","24px"}];，然后在创建元素时：$('<div></div>').css(styles[index]).addClass('text').text(myArraysObj.text);`` To make this work you need the index in your loop: myArray.forEach(function(myArraysObj, index)` 当然你每个 div 都需要有足够的样式，或者只是让它们在样式都用过一次后开始重用。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以尝试如下：

  for (var x in myArraysObj) {

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

【讨论】：