通过数据 ID 选择图库并使用 jQuery 将子图像放入数组

Question

我的 html 文档中有几个 .gallery div。 每个画廊包含几个图像。 如果您单击具有数据 ID 的特定 .gallery 中的图像，我想使用它的数据 ID 将来自同一画廊的所有图像作为 src 属性放入数组中。

这是我试过的：

 $('.img').click(function(){ var galleryValue = $(this).closest('.gallery').attr('data-id'); // alert(galleryValue); $('.gallery').data('id').children().each(function() { urls.push($(this).attr('src')); alert(urls); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery" data-id="0"> <img class="img" src="img/desert.jpg"> <img class="img" src="img/flowers.jpg"> <img class="img" src="img/night.jpg"> <img class="img" src="img/sunset.jpg"> <img class="img" src="img/surf.jpg"> </div>

Answer 1

.data('id')返回一个字符串，您不能将其链接到 jQuery 对象中。 您可以.filter('[data-id="'+galleryValue+'"]')进行链接或将属性选择添加到您的实际选择器中，如下所示：

 $('.img').click(function(){ var galleryValue = $(this).closest('.gallery').data('id'); // alert(galleryValue); urls = []; $('.gallery[data-id="'+galleryValue+'"]').children().each(function() { urls.push($(this).attr('src')); }); alert(urls); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery" data-id="0"> <img class="img" src="img/desert.jpg"> <img class="img" src="img/flowers.jpg"> <img class="img" src="img/night.jpg"> <img class="img" src="img/sunset.jpg"> <img class="img" src="img/surf.jpg"> </div>

Answer 2

这应该工作

$('.img').click(function(){
  var urls = [];
  $(this).closest('.gallery').find('img').each(function() {
    urls.push($(this).attr('src'));
  });
  // now do something with urls
});

如果您还需要id那么您也可以在遍历时获取它。 但是为了在同一个容器中查找图像，您可以完全根据上下文进行操作。