我试图根据用户数以div块显示用户数据。我将使用ajax从服务器获取用户和数据的数量。我想在单独的div块中显示用户数据。如果用户数为2,我想显示两个块,三个块中显示3个用户...我定义了一个div
<div class = "users> </div>.
在这个div内,我想附加用户详细信息,例如
<div class=" user1"> <p><span class="name"></span></p>
<p><span class="age"></span></p>
<p><span class="address"></span></p>
</div>
使用jQuery。如果有两个用户,我必须在中间显示块。根据用户数量,我必须对齐块。(例如:6个用户-一行3个)
如何在div中显示数据?
码:
<div class="users">
<div class="user1">
<p> <span class="name"> </span> </p>
<p> <span class="age"> </span> </p>
<p> <span class="address"> </span> </p>
<p> <span class="phone"> </span> </p>
</div>
<div class="user2">
<p> <span class="name"> </span> </p>
<p> <span class="age"> </span> </p>
<p> <span class="address"> </span> </p>
<p> <span class="phone"> </span> </p>
</div>
</div>
for(var user_name in res) {
$.ajax({
type: 'GET',
timeout: 10000,
dataType: 'json',
url: multidashboard_info_url + '?client=' + user_name,
async: true,
})
.done(function(data) {
console.log(" success and data is ",data);
var dashboard_info = data["dashboard_info"];
var name = dashboard_info["details"]["name"],
age = dashboard_info["details"]["age"],
address = dashboard_info["details"]["address"],
})
.fail(function() {
console.log("error");
})
}
最佳答案
您可以使用append()方法在html内添加内容,对于多个解决方案,您需要创建一个动态函数,如下所示:
Here is working jsFiddle.
function addUserData($selector,name,age,address) {
$selector.append('<p><span class="name">'+ name +'</span></p>' +
'<p><span class="age">'+ age +'</span></p>' +
'<p><span class="address">'+ address +'</span></p>');
}
var name1 = 'John',
age1 = 23,
address1 = 'New York';
addUserData($('.user1'),name1,age1,address1);
var name2 = 'Wall',
age2 = 32,
address2 = 'Istanbul';
addUserData($('.user2'),name2,age2,address2);