jquery如何获取后台传来的list集合中对象的属性

Question

要将对应的mid，message，madd，mcount显示在这个html的div中，现在data中有值，就是对象。求教

Answer 1

$.each(data, function(){ ... })或
$(data).each(function(){ ... })

jquery中的层级选择器：

1. ancestor descendant：表示选取ancestor里面所有的descendant元素。

2. parent > child：表示选择parent元素的所有子元素。

3. prev + next：表示选择prev后面的兄弟元素，就是下一个元素。

4. prev ~ siblings：表示选择prev后面的兄弟元素，后面所有的元素。

Answer 2

$.each(data, function(){ ... })

或

$(data).each(function(){ ... });

追问

貌似不可以，data是个对象，数据库一共16条，data就是整个16条数据的list，此时erach是取不到对象的属性值的，或者你可以给出具体代码，根据图

追答

你16条数据都放一个messdiv？还是说有16个messdiv？如果有16个，你id都命名为messdiv就不对啦，id要唯一

另外，根据你后台返回的数据格式，迭代data，出来的每一个是里面的js对象，而不是数组了，所以，你原来写this[Mid]是不对的，要么加个引号，如this["Mid"]，或者采用对象属性的读取方式，如this.Mid

追问

很明显，16条数据放到一个div中，一条数据一行,this["Mid"]报未定义，一直如此（Mid未定义

追答

既然要每行一个数据，你就别这么搞啦，网页里，留个<div id="messdiv"></div>就行了，内容通过js添加进去

$.each(data, function(k, v){
    //这里定义一个行容器
    var $trdiv = $("div"); 
    //这里定义一个行内元素span，加入一个css类，不用id是为了上一次回答的那个，id要唯一，下同。
    var $mid = $("span").addClass("mid").html(v.mid); 
    var $message = $("span").addClass("message").html(v.message); 
    var $madd = $("span").addClass("madd").html(v.madd); 
    var $mcount = $("span").addClass("macount").html(v.mcount); 
    //这里把行内元素加入到行元素内
    $trdiv.append($mid).append($message).append($madd).append($mcount);
    //这里把行元素加入到页面的展示div中
    $("#messdiv").append($trdiv);
});

程序就这么写的，至于你要他怎么个按行显示，你需要修改相应的样式而使它展示得更好看，一般做行式数据展示，我们还是更常用表格，好像.NET里还有个叫DataGrid的，也是用于展示数据的

追问

非常感谢，晚点试试你说的方法，希望成功，分先送你了

追答

我上面那个定义错了的，你记得把$("div")改为$("<div>")，底下的$("span")也要全部改为$("<span>")

代码应为：

$.each(data, function(k, v){
    //这里定义一个行容器
    var $trdiv = $("<div>"); 
    //这里定义一个行内元素span，加入一个css类，不用id是为了上一次回答的那个，id要唯一，下同。
    var $mid = $("<span>").addClass("mid").html(v.mid); 
    var $message = $("<span>").addClass("message").html(v.message); 
    var $madd = $("<span>").addClass("madd").html(v.madd); 
    var $mcount = $("<span>").addClass("macount").html(v.mcount); 
    //这里把行内元素加入到行元素内
    $trdiv.append($mid).append($message).append($madd).append($mcount);
    //这里把行元素加入到页面的展示div中
    $("#messdiv").append($trdiv);
});

本回答被提问者和网友采纳

Answer 3

$.each(data, function(){ ... })

或

$(data).each(function(){ ... });

追问

貌似不可以，data是个对象，数据库一共16条，data就是整个16条数据的list，此时erach是取不到对象的属性值的，或者你可以给出具体代码，根据图

追答

你16条数据都放一个messdiv？还是说有16个messdiv？如果有16个，你id都命名为messdiv就不对啦，id要唯一

另外，根据你后台返回的数据格式，迭代data，出来的每一个是里面的js对象，而不是数组了，所以，你原来写this[Mid]是不对的，要么加个引号，如this["Mid"]，或者采用对象属性的读取方式，如this.Mid

追问

很明显，16条数据放到一个div中，一条数据一行,this["Mid"]报未定义，一直如此（Mid未定义

追答

既然要每行一个数据，你就别这么搞啦，网页里，留个<div id="messdiv"></div>就行了，内容通过js添加进去

$.each(data, function(k, v){
    //这里定义一个行容器
    var $trdiv = $("div"); 
    //这里定义一个行内元素span，加入一个css类，不用id是为了上一次回答的那个，id要唯一，下同。
    var $mid = $("span").addClass("mid").html(v.mid); 
    var $message = $("span").addClass("message").html(v.message); 
    var $madd = $("span").addClass("madd").html(v.madd); 
    var $mcount = $("span").addClass("macount").html(v.mcount); 
    //这里把行内元素加入到行元素内
    $trdiv.append($mid).append($message).append($madd).append($mcount);
    //这里把行元素加入到页面的展示div中
    $("#messdiv").append($trdiv);
});

程序就这么写的，至于你要他怎么个按行显示，你需要修改相应的样式而使它展示得更好看，一般做行式数据展示，我们还是更常用表格，好像.NET里还有个叫DataGrid的，也是用于展示数据的

追问

非常感谢，晚点试试你说的方法，希望成功，分先送你了

追答

我上面那个定义错了的，你记得把$("div")改为$("<div>")，底下的$("span")也要全部改为$("<span>")

代码应为：

$.each(data, function(k, v){
    //这里定义一个行容器
    var $trdiv = $("<div>"); 
    //这里定义一个行内元素span，加入一个css类，不用id是为了上一次回答的那个，id要唯一，下同。
    var $mid = $("<span>").addClass("mid").html(v.mid); 
    var $message = $("<span>").addClass("message").html(v.message); 
    var $madd = $("<span>").addClass("madd").html(v.madd); 
    var $mcount = $("<span>").addClass("macount").html(v.mcount); 
    //这里把行内元素加入到行元素内
    $trdiv.append($mid).append($message).append($madd).append($mcount);
    //这里把行元素加入到页面的展示div中
    $("#messdiv").append($trdiv);
});

本回答被提问者和网友采纳