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。

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

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相关对象{1}}。试试这个：

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;
}

Answer 2

经过反复试验，这是我想出的代码，并且从我的问题中获得了我想要的结果。这可能不是最干净的代码

    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
}]
    
    var x;
    var appendTLpic = [];
    $(".mygalleryx").each(function () {
  
    x = $(this).data('id')

    appendTLpic = TLPics.filter(element => element.userpostid === x);

    $(appendTLpic).each(function () {
        var src = this.Picture

        $(`.lidf2[data-id=${x}]`).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>
<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>

在处理asp.net Web表单时，我将使用嵌套的转发器简单地解决此问题，在该转发器中，我从由主要转发器的hiddenfeild值控制的数据源获取图像。现在，由于我的新应用程序要求，我不得不使用Ajax来保持这种复杂性。

因此，我使用.mygalleryx类为div创建了每个循环，然后检索了每个div的数据ID。现在，我使用数据ID变量x过滤数组TLPics。然后，我为我的新过滤后的数组的每个函数嵌套一个，以获取图片。现在，在新的过滤数组中，每个函数都使用初始变量x将图像附加到匹配的div dat-id，我完成了。我仍在学习，我希望得到纠正。但这答案解决了我的问题。

jQuery将对象值数组附加到右div

2 个答案: