jquery - next() 和 prev() 与 find

Question

我有一个标记如下:

<div>
  <a href="img1.jpg">
    <img src="img1.jpg"/>
  </a>
  <a href="img2.jpg">
    <img style="display: none" src="img2.jpg"/>
  </a>
  <a href="img3.jpg">
    <img style="display: none" src="img3.jpg"/>
  </a>
  <a href="img4.jpg">
    <img style="display: none" src="img4.jpg"/>
  </a>
  <a href="img5.jpg">
    <img style="display: none" src="img5.jpg"/>
  </a>
  <a href="img6.jpg">
    <img style="display: none" src="img6.jpg"/>
  </a>
</div>

如您所见，第一个 <a> 中的第一张图片显示。我想触发下一个 <img> 的功能显示出来，第一个不可见。

var visible = $('img:visible');
$('#trigger').click(function() {
   visible.next('a').find('img').fadeIn();
   visible.fadeOut();
});

我该如何处理.find()和next()它会起作用吗？

Answer 1

您的目标是可见图像元素。由于 a 不是图像的同级元素，visible.next('a') 将返回 undefined。您需要遍历到父 anchor (使用 .closest('a') 或 .parent())，然后使用 .next() .试试这个:

 visible.closest('a').next().find('img').fadeIn();