jquery 获取链接中的下一个和上一个div id

bqf10yzr  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(153)

我有几个具有唯一类'slide_image'和唯一ID的div。在每个div中,我有两个链接,“#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/
有人能帮我吗?
多谢了

rryofs0p

rryofs0p1#

我首先要做的是人们的建议。将#next#prev更改为类.next.prev
然后循环每个.slide_image并找到它的索引(索引将是其父元素中的当前.slide_image元素。所以第一个.slide_image是1,第二个是2,以此类推)。然后从这里得到下一个和上一个索引(所以1将是-1和2)。然后,我们可以使用jQuery's eq()通过索引查找元素。一旦我们有了元素,我们就可以通过使用attr()来获取它的id。
然后只需将这些ID添加到.next.prev链接。
看看http://jsfiddle.net/4yzg25o2/6/,它有一个工作示例。
我没有检查错误处理,但如果eq()要查找的元素不存在(例如索引为-1的元素),它将返回undefined。所以你可以用它来展示其他的幻灯片。例如,如果我们在第一张幻灯片上,.prev是否应该链接到最后一张幻灯片,或者我们是否应该简单地隐藏链接,以防止他们单击返回?
在我的代码中需要注意的一点是在$(".next", this)中使用了this。基本上第二个属性是上下文,看看这个SO post

相关问题