Question

我试图在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");
     })

}

Answer 1

您可以使用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);

Answer 2

你可能想尝试这样的事情：

＆＃13;

//this object you should be returned as a json_encoded(USERS_ARRAY) at your php controller
var jsonEncodedObject = '[{"name":"Gonsalo Sousa","age":23,"address":"Some Address"},{"name":"Jonh Doe","age":40,"address":"Some Address"}]';

//parseJSON to use with jscript
var users = $.parseJSON(jsonEncodedObject);

//now run the object using $.each()
$(users).each(function(index) {
  //appends each user to the #users <div>
  $('#users').append('<div class="user' + index + '"><p><span class="name">' + this.name + '</span></p>' + '<p><span class="age">' + this.age + '</span></p>' + '<p><span class="address">' + this.address + '</span></p></div>');
});

＆＃13;

[class*="user"] {
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="users"></div>

＆＃13;

<强>更新

也许这可以帮到你

var i = 0;
jQuery(dashboard_info["details"]).each(function(){
    var className = "user"+i;
    jQuery('#users').append('<div class="'+className+'">/*rest of your html*/</div>')
    i++;
});

在div中显示用户数据 - 块

2 个答案: