Question

首先，我说我是JS和jQuery的菜鸟，如果我犯了一些技术错误，我深表歉意。我在从具有的对象中创建具有多个条目的单个元素时遇到问题。

我的问题是我从互联网（确切地说是从randomuser.me）“获取”了一些数据。我获取了20个用户，并将它们放在一个.js文件中。在另一个文件中，我试图仅从那些对象中提取某些元素，并通过jQuery提取HTML。

<HTML>
    <div id="okvir"></div>
</HTML>
<script>
    for (i = 0; i <= korisnici.results.length; i++) 
{
    $("#okvir").append("<div class=blah></div>");
    $(".blah").append("<h1>"+korisnici.results[i].name.first+"</h1>"),
    $(".blah").append("<p>"+korisnici.results[i].email+"</p>"),
    $(".blah").append("<p>"+korisnici.results[i].phone+"</p>")
    $(".blah").append(`<img 
    src="${korisnici.results[i].picture.medium}">`) 
};

</script>

我得到的是：里面有20个新的'div'元素 'div id =“ okvir”'/ div'每个“ div”中包含20个对象元素。

我需要创建20个单独的'div class =“ blah”'元素，并且仅将某些数据从读取的文件发送到每个'div class =“ blah”'容器。

korisnici.results [i] .name.first
korisnici.results [i]。电子邮件
korisnici.results [i] .phone
korisnici.results [i] .picture.medium

提前谢谢大家。我希望我在解释我的需求时还不错。

Answer 1

问题在于$('.blah')是全局选择器，将查找您创建的所有选择器。

for (i = 0; i <= korisnici.results.length; i++) {
  var $div = $("<div class=blah></div>");

  $div.append("<h1>" + korisnici.results[i].name.first + "</h1>"),
  $div.append("<p>" + korisnici.results[i].email + "</p>"),
  $div.append("<p>" + korisnici.results[i].phone + "</p>")
  $div.append(`<img src="${korisnici.results[i].picture.medium}">`)

  $("#okvir").append($div);
};

请的元件，附加到它，然后追加所述一个元件到现有的父。

侧面注意：考虑到您正在使用图像的模板文字，如果整个块都在一个模板文字语句中，则整个块可以是一个append语句。

jQuery将对象数组中的多个元素添加到HTML中

1 个答案: