时间戳

首页 > 解决方案 > 在不同的 div 中显示每个循环项目

javascript - 在不同的 div 中显示每个循环项目

问题描述

标签： javascripthtml

解决方案

我也是新来的，但让我试着回答这个问题。首先，我看到您将循环中的所有内容显示到 id="display" 的单个 div 中。所以一切都在那个单一的 div 中，而不是单独的。要将它们放在单独的 div 中，您可以将显示 div 作为没有绿色边框的根 div，并将循环显示的内容包含在具有绿色边框的 div 中。这样每个循环都将在它自己的 div 中。

<div id="display"></div>

    var gitHubData = document.getElementById("text").innerHTML;

    var newGitHubData = JSON.parse(gitHubData);

function functn(){

  for(var i = 0; i < newGitHubData.items.length; i++) {
    document.getElementById("display").innerHTML += 
    ("<div id='displayinn' style='border: 3px solid green'> Items-" + "<br> " 
      + "Name: "  + newGitHubData.items[i].name + ", <br> " 

      + "Display Name: " + newGitHubData.items[i].display_name + ", <br "

      + "Created By: " + newGitHubData.items[i].created_by + ", <br " 

      + "Released: " + newGitHubData.items[i].released + ", <br> " 

      + "Created At: " + newGitHubData.items[i].created_at + ", <br> " 

      + "Updated At: " + newGitHubData.items[i].updated_at + ", <br> " 

      + "Featured: " + newGitHubData.items[i].featured + ", <br> " 

      + "Curated: " + newGitHubData.items[i].curated + " , <br> " 

      + "Score: " + newGitHubData.items[i].score  + "<br> </div>" 
      );
  }

}
functn();

我希望这能帮助你实现你想要的。

推荐阅读