javascript - Jquery 将一个对象值数组追加到右边的 div

Question

我有一个像这样的对象数组

var TLPics = [{
   id: 2141,
   Picture: "/postimg/20181102_134013.jpg",
   userpostid: 4891
}, {
   id: 2142,
   Picture: "/postimg/20181102_134053.jpg",
   userpostid: 4891
}, {
   id: 2143,
   Picture: "/postimg/20181102_133944.jpg",
   userpostid: 4892
}]

然后我有几个数据属性为 data-id 的 div，如下所示

<div id="TLF" class="c2">
   <div id="ttimgs" class="mygalleryx lidf2" data-id="4891"> </div>
</div>
<div id="TLF" class="c2">
   <div id="ttimgs" class="mygalleryx lidf2" data-id="4892"> </div>
</div>

现在我想要实现的是过滤数组，生成的数组从图片中获取图像数据源:应用于图像，然后将图像附加到正确的 div，并使用与 div 数据相同的 userpostid -id 属性。例如 userpostid=4891 附加到数据 ID = 4891 的 dive。

到目前为止，我已经尝试了下面的代码，但我在创建不具有相同 data-id 的 div 中的图像时遇到了问题

function checkpics(e) {
   var x = parseInt(e);
   var appendTLpic = TLPics.filter(element => element.userpostid === x);
   $(".lidf2").each(function() {
      var thisid = $(this).data('id')
      $(TLPics).each(function() {
         if (thisid == this.userpostid) {
            $('[data-id="' + thisid + '"]').append('<a><img  class="userpictz lazyload imgz xp"  alt="" data-views="" data-likes="" src="' + this.Picture + '" style=" display:inline-block"/></a>');
         }
      });
   });
   appendTLpic = [];
}

Answer 1

您在这里遇到的第一个问题是您在复制 #TLF 和 #ttimgs id 属性时 必须 是唯一的。将它们更改为类。

然后你可以遍历每个 .ttimgs 元素和 find() 数组中的相关对象，通过匹配 data-id 属性到 userpostid 属性，然后附加新的 img。试试这个:

var TLPics = [{
  id: 2141,
  Picture: "/postimg/20181102_134013.jpg",
  userpostid: 4891
}, {
  id: 2142,
  Picture: "/postimg/20181102_134053.jpg",
  userpostid: 4891
}, {
  id: 2143,
  Picture: "/postimg/20181102_133944.jpg",
  userpostid: 4892
}]

$('.ttimgs').each(function() {
  var src = TLPics.find(x => x.userpostid === $(this).data('id')).Picture;
  $(this).append(`<img class="userpictz lazyload imgz xp" alt="" data-views="" data-likes="" src="${src}" />`);
});

.userpictz { 
  display: inline-block; 
  
  /* just for this demo... */
  border: 1px solid #C00;
  width: 30px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TLF c2">
  <div class="ttimgs mygalleryx lidf2" data-id="4891"></div>
</div>
<div class="TLF c2">
  <div class="ttimgs mygalleryx lidf2" data-id="4892"></div>
</div>