jquery.each函数复制每次迭代的项目

Question

我从一个JSON文件中获取了一堆数据，这些数据显示在页面上，一切都很好，除了循环的每个项目在每次迭代时都会重复。

我知道这是愚蠢的，但我的谷歌搜索今天没有用，所以我无法找到答案。 当我记录块变量时，我得到了我正在寻找的响应，但正如我所提到的，当我附加数据时它会重复，所以问题必须在那里。

感谢您的帮助。

$.ajax({
        url: url,
        dataType: 'json',
        success: function(data, status) {

            $('#tp-header h2').html(data.TrustScore.Human);
            $('#tp-header img').attr('src', data.TrustScore.StarsImageUrls.large);
            $('#tp-header span').html(data.ReviewCount.Total);

                $.each(data.Reviews, function(key, val) {
                    var me = this;
                    $.each(val, function(i, j) {
                        var stars = me.TrustScore.StarsImageUrls.small;
                        var date = me.Created.HumanDate;
                        var title = me.Title;
                        var content = me.Content;
                        var avatar = me.User.ImageUrls.i24;
                        var name = me.User.Name;

                        var block = '<div class="review">' +
                                        '<div class="stars"><img src="' + stars + '" class="stars" /></div>' +
                                        '<div class="date">' + date + '</div>' +
                                        '<div class="clearfix"></div>' +
                                        '<h3>' + title + '</h3>' +
                                        '<p>' + content + '</p>' +
                                        '<div class="profile"><i><img src="' + avatar + '" /></i>' +
                                        '<span>' + name + '</span>' +
                                        '</div></div>';

                        $(block).appendTo('#tp-body');

                    });


                });

        },
        error: function(XHR, txtStatus, errThrown) {
            console.log('Error: ' + txtStatus);
            console.log('Error: ' + errThrown);
        }
    });

JSON代码段

{
"Categories":[ ],
"DomainName":"company.net",
"FeedUpdateTime":{ },
"ReviewCount":{ },
"ReviewPageUrl":"http://example.com",
"Reviews":[
  {
     "Created":{
        "UnixTime":1405970056,
        "Human":"21 July 2014 19:14:16 GMT",
        "HumanDate":"21. Jul"
     },
     "Title":"An easy an enjoyable way to earn money",
     "Content":"Some message",
     "TrustScore":{
        "Score":100,
        "Stars":5,
        "Human":"Excellent",
        "StarsImageUrls":{
           "large":"//stars/l/5.png",
           "medium":"//stars/m/5.png",
           "small":"//stars/s/5.png"
        }
     },
     "CompanyReply":"",
     "User":{
        "Name":"Sofia Chinea",
        "City":null,
        "Locale":"en-GB",
        "ReviewCount":1,
        "IsVerified":false,
        "HasImage":false,
        "ImageUrls":{
           "i24":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/24x24.png",
           "i35":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/35x35.png",
           "i64":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/64x64.png",
           "i73":"//s3-eu-west-1.amazonaws.com/images/CloudImages/User/0/73x73.png"
        }
     },
     "Url":"http://www.example.com",
     "IsVerified":false
  },
}

Answer 1

你的问题在于你的迭代：

  $.each(data.Reviews, function (key, val) {
      var me = this; // 'this' is the same as val

      $.each(val, function (i, j) { // you actually iterate over the 'me' variable here
          var stars = me.TrustScore.StarsImageUrls.small;
          var date = me.Created.HumanDate;
          var title = me.Title;
          var content = me.Content;
          var avatar = me.User.ImageUrls.i24;
          var name = me.User.Name;

          var block = '<div class="review">' +
              '<div class="stars"><img src="' + stars + '" class="stars" /></div>' +
              '<div class="date">' + date + '</div>' +
              '<div class="clearfix"></div>' +
              '<h3>' + title + '</h3>' +
              '<p>' + content + '</p>' +
              '<div class="profile"><i><img src="' + avatar + '" /></i>' +
              '<span>' + name + '</span>' +
              '</div></div>';

          $(block).appendTo('#tp-body');
      });
    });

你会看到你如何迭代自己。

您能否展示一下您正在获取的数据响应的示例，以便我们可以看到您希望迭代的内容？

修改

看起来你正在迭代你的第二个循环的Review的每个字段，我不太了解第二个循环的目的，我想你可以删除循环并使用该循环内的代码在你的第一个循环中。像这样：

  $.each(data.Reviews, function (key, val) {
      var me = this;

      var stars = me.TrustScore.StarsImageUrls.small;
      var date = me.Created.HumanDate;
      var title = me.Title;
      var content = me.Content;
      var avatar = me.User.ImageUrls.i24;
      var name = me.User.Name;

      var block = '<div class="review">' +
          '<div class="stars"><img src="' + stars + '" class="stars" /></div>' +
          '<div class="date">' + date + '</div>' +
          '<div class="clearfix"></div>' +
          '<h3>' + title + '</h3>' +
          '<p>' + content + '</p>' +
          '<div class="profile"><i><img src="' + avatar + '" /></i>' +
          '<span>' + name + '</span>' +
          '</div></div>';

      $(block).appendTo('#tp-body');
  });

并且使得外观变得更好，因为你只使用了一次变量，所以制作它们的变量是没用的：

  $.each(data.Reviews, function (key, val) {
      var block = '<div class="review">' +
          '<div class="stars"><img src="' + val.TrustScore.StarsImageUrls.small + '" class="stars" /></div>' +
          '<div class="date">' + val.Created.HumanDate + '</div>' +
          '<div class="clearfix"></div>' +
          '<h3>' + val.Title + '</h3>' +
          '<p>' + val.Content + '</p>' +
          '<div class="profile"><i><img src="' + val.User.ImageUrls.i24 + '" /></i>' +
          '<span>' + val.User.Name + '</span>' +
          '</div></div>';

      $(block).appendTo('#tp-body');
  });