什麼是更好的方式來執行這個jQuery功能？

我正在查詢api並獲取一組帶有照片，姓名，電子郵件和電話號碼的人。我試圖採取這些數據，並將其插入到我的視圖與jquery ajax並顯示在引導佈局。什麼是更好的方式來執行這個jQuery功能？

當我在評論部分做到這一點時，需要人員顯示他們的所有數據和剩餘的數據。然後它會轉到第二個索引並執行以下操作。所以如果我有4人，我會有4人，3人，2人等4個div。

我修正了它的一個單獨的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？或者是這樣嗎？

謝謝

來源

2017-02-15 ahackney

什麼是desidered輸出？ – Grork

修復了代碼塊以顯示我正在嘗試執行的操作。沒有注意到它在開始時沒有正確格式化。謝謝。 – ahackney

@ahackney你介意重新格式化你的源代碼，那麼水平滾動條會消失嗎？ – reporter

這個怎麼樣？

var data = [{ 
 
    "full_name": "Lillian Gilbert", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff", 
 
    "phone": "86-(925)179-9301" 
 
}, { 
 
    "full_name": "Eric Dixon", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/dddddd/000000", 
 
    "phone": "66-(115)374-7439" 
 
}, { 
 
    "full_name": "Jessica Rodriguez", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff", 
 
    "phone": "7-(536)585-2870" 
 
}, { 
 
    "full_name": "Juan Wilson", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "7-(257)204-7934" 
 
}, { 
 
    "full_name": "Samuel Hill", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "63-(328)705-8980" 
 
}, { 
 
    "full_name": "Louis Ruiz", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/dddddd/000000", 
 
    "phone": "46-(888)764-8155" 
 
}, { 
 
    "full_name": "Clarence Larson", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff", 
 
    "phone": "58-(422)543-6609" 
 
}, { 
 
    "full_name": "Carlos Mendoza", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/5fa2dd/ffffff", 
 
    "phone": "7-(624)453-7787" 
 
}, { 
 
    "full_name": "Irene Dean", 
 
    "email": "[email protected]", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "598-(462)226-1135" 
 
}, { 
 
    "full_name": "Frank Ramos", 
 
    "email": "[email protected]", 
 
    "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>

來源

2017-02-15 12:54:36

這就是他們已經在做的事情，查看更新後的問題（除非你在表格中完成了你的例子，這不是他們想要的） – DibsyJr

@DibsyJr這個怎麼樣？ –

該對象似乎不必要，我建議使用一個字符串，並在追加它之前建立HTML，如果字符串被格式化爲看起來類似於他們在HTML中的樣子，那麼我發現它提高了可讀性 – DibsyJr

什麼是更好的方式來執行這個jQuery功能？

回答

相關問題