Question

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

生成的REsult应该像：

＆＃13;

<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>

＆＃13;

这是我的实际代码：

＆＃13;

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);
		
        });

＆＃13;

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

＆＃13;

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

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

Answer 1

您的代码很好，但您必须将数组的所有内容附加到＆＃34; myAccordion＆＃34;变种

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

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

    });

我希望能帮到你

Answer 2

你只看到最后一个的原因是你从不初始化变量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);

Answer 3

尝试将变量myAccordion附加到#myAccordianDiv

中的$.each()元素

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>

Answer 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);

Answer 5

Bts之类的东西，可以让它在少数minuts中运行:: /但是寻找AngularJS并将一个Object或更好的JSON-Object填充到表中。一些好的教程： http://www.w3schools.com/angular/angular_tables.asp

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

＆＃13;

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;);
});

＆＃13;

<!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>

＆＃13;

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

5 个答案: