Question

这可能是一种非常简单的方法，但我无法弄明白。

我的方法是让所有<img>元素具有“扩展图像”类，这些元素位于我当前“条目”的“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 

  });
});

Answer 1

首先，您根本不需要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...
});

Answer 2

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

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

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

  });
});

Answer 3

使用closest，prev和find

的组合

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

Answer 4

您可以使用closest()冒泡来查找选择器中指定的父级。然后，您可以从那里向下导航到所需的元素。

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

同样，Ron建议您不必循环然后绑定点击事件。你可以简单地做

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

访问当前div之外的div内的元素

4 个答案: