Question

如果我在数组中有四个不同的对象，结构就像json;怎么会，你将每个的值附加到不同的div对象。每个人都谢谢你:)）

Random

HTML 的

 var obje = [ 
        {name:"nemke", age:12, },
        {name:"nemkeee", age:1222, },
        {name:"nemke1231", age:1221321, },
        {name:"nemkasfe", age:32112, },
      ]

例如

<div class="main-div">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我知道; s obje[0].name && obje[0].age goes to first child obje[1].name && obje[1].age goes to second div，但我坚持这一点。

Answer 1

选中此https://plnkr.co/edit/j41BsvofELJnQAQYxY8k?p=preview

$('.main-div div').each(function(i, e){
    $(this).html(obje[i].name +'&nbsp;&nbsp;&nbsp;'+ obje[i].age)
});

Answer 2

方法＃01（使用jQuery）：

您可以使用jQuery＆＃39; $.each()方法：

$.each($('.main-div div'), function(i, elem) {
  $(elem).text('Name: ' + obje[i].name + ', Age: '+  obje[i].age);
});

＆＃13;

var obje = [ 
  {name:"nemke", age:12, },
  {name:"nemkeee", age:1222, },
  {name:"nemke1231", age:1221321, },
  {name:"nemkasfe", age:32112, },
];

$.each($('.main-div div'), function(i, elem) {
  $(elem).text('Name: ' + obje[i].name + ', Age: '+  obje[i].age);
});

＆＃13;

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

＆＃13;

方法＃02（使用Pure JavaScript）：

您可以使用.querySelectorAll()选择元素，然后使用[].forEach.call()对其进行迭代，如下所示：

[].forEach.call(document.querySelectorAll('.main-div div'), function(div, index) {
  div.innerHTML = 'Name: ' + obje[index].name + ', Age: '+  obje[index].age
});

＆＃13;

var obje = [ 
  {name:"nemke", age:12, },
  {name:"nemkeee", age:1222, },
  {name:"nemke1231", age:1221321, },
  {name:"nemkasfe", age:32112, },
];


[].forEach.call(document.querySelectorAll('.main-div div'), function(div, index) {
	div.innerHTML = 'Name: ' + obje[index].name + ', Age: '+  obje[index].age
});

＆＃13;

<div class="main-div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 3

迭代对象键并使用

$(".main-div").find("div").eq(key) // in jquery

document.querySelectorAll(".main-div div")[key] // in javascript

将创建的html附加到现有的div中。

＆＃13;

var obje = [{
  name: "nemke",
  age: 12,
}, {
  name: "nemkeee",
  age: 1222,
}, {
  name: "nemke1231",
  age: 1221321,
}, {
  name: "nemkasfe",
  age: 32112,
}, ]


Object.keys(obje).forEach(function(key) {
  var val = obje[key];
  var htmlString = "<span>" + obje[key].name + "</span> <span>" + obje[key].age + "</span>"
  document.querySelectorAll(".main-div div")[key].innerHTML = htmlString;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 4

＆＃13;

var obje = [ 
        {name:"nemke", age:12, },
        {name:"nemkeee", age:1222, },
        {name:"nemke1231", age:1221321, },
        {name:"nemkasfe", age:32112, },
      ]
 $(".main-div div").each(function(i,div){
 $(this).html("name : " +obje[i].name +" , age : "+obje[i].age);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

＆＃13;

在JS中：

＆＃13;

  var obje = [ 
            {name:"nemke", age:12, },
            {name:"nemkeee", age:1222, },
            {name:"nemke1231", age:1221321, },
            {name:"nemkasfe", age:32112, },
          ]
    var x = document.getElementsByClassName("main-div")[0].children;

for(i=0;i<x.length;i++){
    x[i].innerHTML="name : "+obje[i].name+" , age :"+obje[i].age;
  }

＆＃13;

    <div class="main-div">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>

＆＃13;

Answer 5

使用getElementsByTagName之类的东西创建div的数组，然后遍历对象，并使用循环中引用的相同数组索引将数组元素的值赋给相应的div。

＆＃13;

 var obje = [ 
        {name:"nemke", age:12, },
        {name:"nemkeee", age:1222, },
        {name:"nemke1231", age:1221321, },
        {name:"nemkasfe", age:32112, },
      ],
    divs = document.getElementsByTagName('div');

for (var i = 0; i < obje.length; i++) {
  divs[i].innerHTML = obje[i].name + obje[i].age;
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

Answer 6

所以你需要两个循环。一个用于数组，一个用于该数组中对象的键。

var arr = [ 
    {name:"nemke", age:12, },
    {name:"nemkeee", age:1222, },
    {name:"nemke1231", age:1221321, },
    {name:"nemkasfe", age:32112, },
];

arr.forEach(function(obj) {
    var keys = Object.keys(obj);
    keys.forEach(function(key) {
        // logic to append divs goes here
        console.log('<div>' + obj[key] + '</div>');
    })
});

产生

<div>nemke</div>
<div>12</div>
<div>nemkeee</div>
<div>1222</div>
<div>nemke1231</div>
<div>1221321</div>
<div>nemkasfe</div>
<div>32112</div>

Answer 7

尝试此代码希望它适合您 -

JSFiddle

JAVASCRIPT -

for(var i=0;i<obje.length;i++){
$('.main-div').find('div:eq('+i+')').append(obje[i]['name'].toString()+' '+obje[i]['age'].toString());
}

Answer 8

纯JavaScript解决方案：

var obje = [{name:"nemke", age:12},
            {name:"nemkeee", age:1222},
            {name:"nemke1231", age:1221321},
            {name:"nemkasfe", age:32112}];
    
var allDivs = document.querySelectorAll(".main-div div");
obje.forEach(function(obj, index, arr) {
  allDivs[index].innerText = obj.name + " - " + obj.age;	
});

<div class="main-div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

您的阵列上有一些语法错误。

JSFiddle ：https://jsfiddle.net/b90axrhv/

迭代对象并向不同的div添加属性

8 个答案: