Выбор галереи по идентификатору данных и помещение дочерних изображений в массив с помощью jQuery

Question

У меня есть пара div .gallery в моем документе html. Каждая галерея содержит пару изображений. Если вы щелкнете по изображению из указанной c .gallery с идентификатором данных, я хочу поместить все изображения, принадлежащие его атрибуту sr c, из той же галереи в массив, используя галерею с идентификатором данных.

вот что я пробовал:

$('.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

Это должно работать

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

Если вам также нужен id, то вы можете захватить его, когда будете проходить. Но для того, чтобы просто найти изображения в одном и том же контейнере, вы можете сделать это полностью в контексте.

Answer 2

.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>