Блог

Вероятно, это очень простой подход, однако я не смог его понять.

Мой подход заключается в том, чтобы получить все <img> элементы, имеющие класс «expanded-image», которые находятся в «img-preview» моей текущей «записи».

Это мой html:

 <div class="entry">
 <div class="img-preview">
    <img>
    <img class="expanded-image" style="display:none;">
 </div>

 <div class="content">
    [..]
    [..]
    <span class="more-text"></span>
    [..]
    [..]
 </div>
</div>
 

И это JS, с которым я работаю:

 $('.content').each(function(event) {

  $(this).find('span.more-text').click(function(event) {

      // TODO 

  });
});
 

Во-первых, вам вообще не нужен each() , поскольку вы можете применить обработчик click() событий ко всем элементам в пределах одного селектора.

Чтобы решить вашу проблему, вы можете использовать closest() для поиска ближайшего родительского .entry элемента к выбранному .more-text . Оттуда вы можете find() получить доступ ко всем .expanded-image элементам. Попробуйте это:

 $('.content span.more-text').click(function(event) {
    var $imgs = $(this).closest('.entry').find('.img-preview .expanded-image');
    // work with $imgs here...
});
 

 $('.content').each(function(event) {
  var $content = $(this);

  $(this).find('span.more-text').click(function(event) {

      $content.parent().find('.expanded-image'); // there you go

  });
});
 

Используйте o комбинацию closest , prev и find

 $('span.more-text').click(function(event) {
     $(this).closest('.content').prev().find('.expanded-image');
  });
 

Вы можете использовать closest() для всплывающего окна, чтобы найти родительский элемент, указанный в селекторе. Затем оттуда вы можете перейти к требуемым элементам.

  $(this).closest('.entry').find('.img-preview .expanded-image');
 

Также, как предположил Рон, вам не нужно выполнять цикл, а затем привязывать события щелчка. Вы можете просто сделать

 $('.entry .content .more-text').click(function(){
   $(this).closest('.entry').find('.img-preview .expanded-image');
})