遍历一个数组

Question

这是我的 JQuery 代码：

$.ajax({
            type: 'POST',
            url: 'query2.php',
            data: key,
            dataType: 'json',
            success: function (msg) {

                var cnt = 0;
                $.each(msg, function(){
                    $('#jobtitle').html("<div>" + msg[cnt].jobTitle + "</div>");
                    $('#jobname').html(msg[cnt].jobName);
                    $('#fullname').html(msg[cnt].fullName);
                    $('#phone').html(msg[cnt].phone);
                    $('#mail').html(msg[cnt].mail);
                    $('#city').html(msg[cnt].city);
                    $('#description').html(msg[cnt].description);
                    cnt++;
                });

从我的 query2.php 中我得到如下信息：

{'JobTitle': 'a', 'jobName': 'b', ...}, {'JobTitle': 'a', 'jobName': 'c', ...}

为什么我不能打印两行结果？它只打印一行。

更新： 首先，感谢您的所有回答:)

正如#Suren Srapyan 所说，我使用了 Key、Value + append 但结果并不好。它返回几个重复值，例如：

شرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکت
گلخانهمهندسیگلخانهمهندسیگلخانهگلخانهمهندسیگلخانهگلخانهمهندسیمهندسیگلخانهمهندسیمهندسی
علی علویمصطفی کلانترعلی علویمصطفی کلانترعلی علویعلی علویمصطفی کلانترعلی علویعلی علویمصطفی کلانترمصطفی کلانترعلی علویمصطفی کلانترمصطفی کلانتر
12345609153040406123456091530404061234561234560915304040612345612345609153040406091530404061234560915304040609153040406
a@a.comM.Mastersoft@gmail.coma@a.comM.Mastersoft@gmail.coma@a.coma@a.comM.Mastersoft@gmail.coma@a.coma@a.comM.Mastersoft@gmail.comM.Mastersoft@gmail.coma@a.comM.Mastersoft@gmail.comM.Mastersoft@gmail.com
مشهدتهرانمشهدتهرانمشهدمشهدتهرانمشهدمشهدتهرانتهرانمشهدتهرانتهران
توضیحات علی علویتوضیحات مصطفیتوضیحات علی علویتوضیحات مصطفیتوضیحات علی علویتوضیحات علی علویتوضیحات مصطفیتوضیحات علی علویتوضیحات علی علویتوضیحات مصطفیتوضیحات مصطفیتوضیحات علی علویتوضیحات مصطفیتوضیحات مصطفی

我只有两个数组元素：

{'JobTitle': 'a', 'jobName': 'b', ...}, {'JobTitle': 'a', 'jobName': 'c', ...}

我的回答（浏览器的检查元素）是正确的。 正如@memo 所问，我的 HTML 是：

<div class="row" id="show">
            <div class="cell" id="jobtitle"></div>
            <div class="cell" id="jobname"></div>
            <div class="cell" id="fullname"></div>
            <div class="cell" id="phone"></div>
            <div class="cell" id="mail"></div>
            <div class="cell" id="city"></div>
            <div class="cell" id="description"></div>
        </div>

是的@Z.Alpha，如果我不使用追加，它会打印最后一行。

Answer 1

因为您每次都会更改 HTML。

$('#jobtitle').append("<div>" + msg[cnt].jobTitle + "</div>");

此代码将 Html 设置为该值，然后在下一次迭代中将其替换为另一个代码，因此您只能看到最后一个。

和 您可以删除您的 cnt 变量并像这样编写

$.each( msg, function( key, value ) {

    $('#jobtitle').append("<div>" + value.jobTitle + "</div>");
    $('#jobname').append(value.jobName);
    $('#fullname').append(value.fullName);
    $('#phone').append(value.phone);
    $('#mail').append(value.mail);
    $('#city').append(value.city);
    $('#description').append(value.description);

});

key 是您的索引，例如 0,1,2，value 是您当前的项目。

查看文档
http://api.jquery.com/jquery.each/
http://api.jquery.com/html/

Answer 2

查看此示例，这将有所帮助

var data = {
  "id": "0001",
  "type": "donut",
  "name": "Cake",
  "ppu": 0.55
}


$.each(data, function() {
  console.log(data);
  console.log(data.id);
  console.log(data.type);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

您应该使用.append() 而不是.html()，因为.html() 将替换以前的值/数据，然后将最后一个值作为迭代停止点。所以最后，会以最后一个值结束。使用下面的代码：

收到的数据应该是这样的：

var msg = [{'JobTitle': 'a','jobName': 'b'}, { 'JobTitle': 'a','jobName':'c'}];

而 js 应该是：

$.each(msg, function(i, e){
   // one more things, as you use .each
   // then use its 2 argument `e`, to access the properties
   // otherwise use for loop if you want to use 
   // like msg[cnt]
   $('#jobtitle').append("<div>" + e.jobTitle + "</div>");
   $('#jobname').append(e.jobName);
   // same goes the other
   ........
});

这里是DEMO