如何用jQuery在html元素中添加对象值？

Question

我一直试图在多个div元素中添加一个对象值，但我很难得到预期的行为。

这是我的代码：

​

obj = {
  valeur1: "text1",
  valeur2: "text2",
  valeur3: "text3",
  valeur4: "text4"
}

$('div').each(function(i) {
  $.each(obj, function(index, value) {
    if (value in $('div')) {
      return
    } else {
      $('div').text(value);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>

​

我不明白为什么我总是得到：

text4
text4
text4
text4

请你解释一下我的算法有什么问题吗？

非常感谢你的帮助！

Answer 1

​

var obj = [
  "text1",
  "text2",
  "text3",
  "text4"
]

console.log(obj.length);

$('div').each(function(i) {
  this.innerHTML = obj[i];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>

​

您使用的是上面的型号吗？您可以很容易地声明一个字符串数组，并像我演示的那样迭代它。

Answer 2

你不需要嵌套循环。使用主循环中的索引获取属性的相应元素。

您应该设置$(this).text()，而不是$('div').text()，因为后者设置的是所有DIVs的文本，而不是循环的当前元素。

​

obj = {
  valeur1: "text1",
  valeur2: "text2",
  valeur3: "text3",
  valeur4: "text4"
}

$('div').each(function(i) {
  $(this).text(obj['valeur' + (i+1)])
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>

​

Answer 3

你在循环中循环。因此，您输入的任何值都会被覆盖，直到最后一个循环。

一种修复方法，如下所示：

​

$(function() {
  var obj = {
    valeur1: "text1",
    valeur2: "text2",
    valeur3: "text3",
    valeur4: "text4"
  }

  var i = 0;

  $.each(obj, function(key, value) {
    $("div").eq(i++).html(value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>

​

在本例中，迭代对象本身。因为$.each()将给我们key和value对，所以我们可以设置一个在循环中使用的index变量。我们可以使用<div>以.eq()为目标。

另一个是这样的：

​

$(function() {
  var obj = {
    valeur1: "text1",
    valeur2: "text2",
    valeur3: "text3",
    valeur4: "text4"
  }

  $("div").each(function(i, el) {
    var k = Object.keys(obj);
    $(el).html(obj[k[i]]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>

​

这一个，我们迭代元素。这次我们得到了一个index和element对。因为我们希望从对象中获得特定的匹配元素，所以我们可以创建一个键数组并在循环中使用每个键。

你选的。