如何从 JS 数组创建 Div 构造？答案

【问题标题】：How can i create a Div Construct from a JS Array?如何从 JS 数组创建 Div 构造？
【发布时间】：2015-11-12 02:48:29
【问题描述】：

我实际上尝试创建一个基于 JS 数组的简单 Div 构造... 不幸的是，我下面的方式只显示了数组的最后一个组/元素，必须更改哪些内容才能为每个数组元素创建一个重复的 Div 构造？

生成的结果应该是这样的：

<div id="accordion">
  <h3>'val.labelfromelement1'</h3>
  <div class="notimportant">'val.Namefromelement1'</div>
  <h3>'val.labelfromelement2'</h3>
  <div class="notimportant">'val.Namefromelement2'</div>
  <h3>'val.labelfromelement3'</h3>
  <div class="notimportant">'val.Namefromelement3'</div>
  <h3>'val.labelfromelement4'</h3>
  <div class="notimportant">'val.Namefromelement4'</div>
</div>

这是我的实际代码：

var myData = [
			{
				label: "erster",
				id: 0,
				Name:"Ein Name"
				
				},
			{
				label: "zweiter",
				id: 1,
				Name:"Der zweite Name"
				
				},
			{
				label: "dritter",
				id: 2,
				Name:"Dritter Name"
				
				}
		
		]


$(document).ready(function(e) {
			$.each(myData, function (i, val) {
				myAccordion = "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
			});
			$("#myAccordionDiv").html(myAccordion);
		
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="myAccordionDiv">

</div>
</body>

如您所见，如果我们在数组中创建一个新元素（数组来自图表），它应该会导致手风琴自动增加

有什么建议吗？感谢您的帮助！

【问题讨论】：

你可能会发现这个插件很有用：github.com/ndugger/jQuery.HTMLBuilder.js

标签： javascript jquery html arrays

【解决方案1】：

您只看到最后一个的原因是因为您从未初始化变量 myAccordionDiv 并将迭代中的每个 html 字符串附加到它。

小提琴：http://jsfiddle.net/hz0b6k71/

var myAccordion = "";
$.each(myData, function (i, val) {
    myAccordion += "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
});
$("#myAccordionDiv").html(myAccordion);

【讨论】：

【解决方案2】：

您的代码很好，但您必须将数组的所有内容附加到“myAccordion”变量。

如果您像这样更改您的 js 代码，它将起作用。

$(document).ready(function(e) {
        var myAccordion;
        $.each(myData, function (i, val) {
            myAccordion += "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
        });
        $("#myAccordionDiv").html(myAccordion);

    });

希望对你有帮助

【讨论】：

【解决方案3】：

尝试将变量myAccordion 附加到$.each() 内的#myAccordianDiv 元素

var myData = [{
    label: "erster",
    id: 0,
    Name: "Ein Name"

  }, {
    label: "zweiter",
    id: 1,
    Name: "Der zweite Name"

  }, {
    label: "dritter",
    id: 2,
    Name: "Dritter Name"

  }

];

$(document).ready(function(e) {
  $.each(myData, function(i, val) {
    var myAccordion = "<h3>" + val.label + "</h3><div>" + val.Name + "</div>";
    // append `myAccordion` string to `#myAccordionDiv`
    $("#myAccordionDiv").append(myAccordion);
  });
  

});

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

<body>
  <div id="myAccordionDiv">

  </div>
</body>

【讨论】：

【解决方案4】：

这是一种使用原始 javascript 的方法：

http://jsbin.com/nofiqiweri/edit?html,js,console,output

您没有正确地将数据存储到 myAccordion 变量中。

var myData = [
 {
  label: "erster",
  id: 0,
  Name:"Ein Name"               
},
  {
    label: "zweiter",
    id: 1,
    Name:"Der zweite Name"

  },
  {
    label: "dritter",
    id: 2,
    Name:"Dritter Name"
  }

];



  var myAccordion;
  for (var i=0; i<myData.length; i++) {
    myAccordion += '<h3>'+myData[i].label+'</h3><div>'+myData[i].Name+'</div>';
  }
  document.getElementById('myAccordionDiv').innerHTML(myAccordion);

【讨论】：

那不是原始的 javascript。 $('#myAccordionDiv').html(myAccordion);或 $(function () {});

【解决方案5】：

类似的 Bts 可以让它在这几分钟内运行：:/ 但是寻找 AngularJS 并将一个 Object 甚至更好的 JSON-Object 填充到一个表中。一些很好的教程： http://www.w3schools.com/angular/angular_tables.asp

http://jsfiddle.net/mjaric/pj5br/

var myData = [{
    label: "erster",
    id: 0,
    Name: "Ein Name"

  }, {
    label: "zweiter",
    id: 1,
    Name: "Der zweite Name"

  }, {
    label: "dritter",
    id: 2,
    Name: "Dritter Name"

  }

]

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.names = myData;);
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>BlaBlaBla</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-controller="customersCtrl">
    <div ng-repeat="x in names">
      <h3>{{x.Name}}</h3>
    </div>
  </div>
</body>

</html>

【讨论】：