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

您需要使用：

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

因为您希望获得可见图像的父锚的下一个直接兄弟，而不是

Answer 2

您定位的是可见图像元素。如果不是图像的兄弟，visible.next('a')将返回undefined。您需要遍历父锚（使用.closest('a')或.parent()），然后使用.next()。尝试此操作：

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

Answer 3

试试这个 -

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

Answer 4

更新：

var visible = $('img:visible');

到此：

var visible = $('img:visible').closest('a');

因为您现有的选择器visible正在尝试找到自己旁边的另一个锚点，而不是那样，以便取而代之的工作取而代之，您可以将var visible更新为遍历到最近的父级，锚定a。

next（）和prev（）with find

4 个答案: