javascript - 为什么 jquery prev() 工作正常但 next() 失败？

Question

我有以下 html 代码:

<div class="general_images">
  <a href="href_1" data-id="id_1">
    <img src="some_source">
  </a>
  <a href="href_2" data-id="id_2">
    <img src="some_source">
  </a>
  <a href="href_3" data-id="id_3">
    <img src="some_source">
  </a>
  <a href="href_4" data-id="id_4">
    <img src="some_source">
  </a>
  <a href="href_5" data-id="id_5">
    <img src="some_source">
  </a>
</div>

& 我使用了以下 js 代码来获取下一个和上一个字段的值:

$(".general_images a").click(function(e){
  data_prev = $(this).prev().attr('data-id');
  data_next = $(this).next().attr('data-id');
});

但是由于某些原因 .prev().attr('data-id') 正在重新计算正确的值，而 .next().attr('data-id') 返回未定义。

有任何见解或建议吗？

Answer 1

您的代码运行良好。您遇到的问题很简单:

next() 和 prev() 获取元素树上相同“级别”内的元素。当您单击具有 data-id="id_1" 属性的第一张图像时，您可以看到该图像之前没有任何元素，这就是它为您提供 "undefined 的原因".

如果您单击 data-id="id_5" 属性中的图像，next() 也会发生同样的事情，您可以看到该图像之后没有元素。