Question

我正在查询api并让一群人收到照片，姓名，电子邮件和电话号码。我正在尝试获取该数据并使用jquery ajax将其插入到我的视图中，并将其显示在引导程序布局中。

当我使用评论部分执行此操作时，人员将显示其所有数据和剩余数据。然后它将转到第二个索引并执行以下操作。所以，如果我有4个人，我会有4个人，4个人，3个人，2个人等等。

我通过使用一个单独的js系列将它全部放在一个div中来修复它但是由于某种原因它感觉很顽固，就像它不应该这样。有没有更好的方法呢？我在我的js中放了太多html吗？我该如何清理它？

//This works to give me a div of each person with the h4 and p tags as needed in my layout
$.each(data, function(item) {
    $( '.people').append('<div class="col-md-6 person">
<img class="img img-responsive" src="' + data[item].photo_url + '"><h4>'
 + data[item].full_name + '</h4><p>' + data[item].offices[0].email
 + '</p><p>' + data[item].offices[0].phone + '</p>');

//This just creates a blank div for each person than
iterates through the index for each person
    /*$( '.people').append('<div class="col-md-6 person">');
        $( '.person' ).append('<img class="img img-responsive" src="' + 
data[item].photo_url + '">')
        .append('<h4>' + data[item].full_name + '</h4>')
        .append('<p>' + data[item].offices[0].email + '</p>')
        .append('<p>' + data[item].offices[0].phone + '</p>');*/
});

我的最终目标是为每个人设置一个div，其中包含他们自己元素中的图像，姓名，电子邮件和电话号码。

如何从js中删除尽可能多的html？或者是这样吗？

谢谢

Answer 1

这个怎么样？

var data = [{
  "full_name": "Lillian Gilbert",
  "email": "lgilbert0@geocities.com",
  "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff",
  "phone": "86-(925)179-9301"
}, {
  "full_name": "Eric Dixon",
  "email": "edixon1@symantec.com",
  "photo": "http://dummyimage.com/50x50.jpg/dddddd/000000",
  "phone": "66-(115)374-7439"
}, {
  "full_name": "Jessica Rodriguez",
  "email": "jrodriguez2@wired.com",
  "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff",
  "phone": "7-(536)585-2870"
}, {
  "full_name": "Juan Wilson",
  "email": "jwilson3@latimes.com",
  "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff",
  "phone": "7-(257)204-7934"
}, {
  "full_name": "Samuel Hill",
  "email": "shill4@altervista.org",
  "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff",
  "phone": "63-(328)705-8980"
}, {
  "full_name": "Louis Ruiz",
  "email": "lruiz5@pagesperso-orange.fr",
  "photo": "http://dummyimage.com/50x50.jpg/dddddd/000000",
  "phone": "46-(888)764-8155"
}, {
  "full_name": "Clarence Larson",
  "email": "clarson6@facebook.com",
  "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff",
  "phone": "58-(422)543-6609"
}, {
  "full_name": "Carlos Mendoza",
  "email": "cmendoza7@opensource.org",
  "photo": "http://dummyimage.com/50x50.jpg/5fa2dd/ffffff",
  "phone": "7-(624)453-7787"
}, {
  "full_name": "Irene Dean",
  "email": "idean8@msn.com",
  "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff",
  "phone": "598-(462)226-1135"
}, {
  "full_name": "Frank Ramos",
  "email": "framos9@delicious.com",
  "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff",
  "phone": "64-(204)933-8956"
}];

var people = $('.people');
$.each(data, function(index, item) {
  var person = {
    photo: '<img class="img img-responsive" src="' + item.photo + '">',
    name: '<h4>' + item.full_name + '</h4>',
    email: '<p>' + item.email + '</p>',
    phone: item.phone
  };
  people.append('<div class="col-md-6 person">' + person.photo + person.name + person.email + person.phone + '</div>');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="people"></div>

有什么更好的方法来执行这个jQuery函数？

1 个答案: