在 link 中获取下一个和上一个 div id

Question

我有几个具有唯一 class 'slide_image' 和唯一 ID 的 div。在每个 div 中，我有 2 个链接，“#next”和“#prev”。我想要做的是为每个 div 获取下一个和上一个 div 的 id，并将 id 归因于 ty 链接。

例如 .slide_image id=slide_3

<div id="slide_2" class="slide_image">
    1
    <a href="#slide_3" id="next"></a><a href="#slide_1" id="prev"></a>
</div>

<div id="slide_3" class="slide_image">
    1
    <a href="#slide_4" id="next"></a><a href="#slide_2" id="prev"></a>
</div>

这是我已经尝试过但没有用的方法，我想我的 each() 函数有问题：

$('.slide_image').each(function(e){
    var next_link = $(this).next().attr('id');

$( "a#next" ).next().attr("href", next_link)
});

$('.slide_image').each(function(e){
    var prev_link = $(this).prev().attr('id');

$( "a#prev" ).prev().attr("href", prev_link)
});

这是一个包含我所有代码的 Jsfiddle：http://jsfiddle.net/4yzg25o2/1/

谁能帮我解决这个问题？

非常感谢，

Answer 1

我首先要做的是人们的建议。将 #next 和 #prev 更改为类 .next 和 .prev.

然后循环每个 .slide_image 并找到它的索引（索引将是其父元素中的当前 .slide_image 元素。因此第一个 .slide_image 将为 1，第二个为 2，依此类推).然后从这里获取下一个和上一个索引（因此 1 将是 -1 和 2）。然后我们可以使用 jQuery's eq() to find an element by it's index. Once we have the element we can then get it's id by using attr().

然后只需将这些 id 添加到 .next 和 .prev links.

看看 http://jsfiddle.net/4yzg25o2/6/ 有一个工作示例。

我没有检查错误处理，但 eq() 会 return undefined 如果它要查找的元素不存在（例如索引为 -1 的元素） ).所以你可以用它来展示其他幻灯片。例如，如果我们在第一张幻灯片上，.prev link 应该到最后一张幻灯片，还是应该简单地隐藏 link 以防止他们点击返回？

我的代码中要注意的一件事是在 $(".next", this) 中使用了 this。基本上第二个属性就是上下文，看看这个SO post。

在 link 中获取下一个和上一个 div id

getting next and prev div id inside a link

jquery

attributes

each

next